运行展示：KLineCharts 是渲染层

Ⅳ · 研究与可视化 — 4.3

浏览器图表负责把结构化的市场、标注与订单状态呈现给人，不负责替代指标计算、回测或订单执行。

先看实际 KLineCharts 效果

下面是站内真实初始化的 KLineCharts 组件，不是静态 SVG 或截图。它读取本项目随站点打包的 NautilusTrader 回测输出，显示 K 线、均线，以及同次运行的成交、持仓和累计已实现盈亏。拖拽、缩放与十字光标由图表库实际提供。

EUR/USD · 15M · EMACross(12,34)

K线 2,400成交 112持仓 56胜率 60.7%净盈亏 +13,746.04 USD

图示为该次运行的最后 400 根 K 线与均线 · 页头成交与持仓统计来自同一份引擎输出 · 均由 4.3 所述 JSON 驱动渲染

累计已实现盈亏 · 56 笔平仓

本示例和 4.2 一样不依赖后端。数据是本项目的静态 JSON，验证的是“结构化结果能驱动浏览器图表”的链路；行情是合成序列，图中盈亏不代表策略表现。

再定义图表层的输入

KLineCharts 这类浏览器图表库接收的是已整理好的数据。它可以显示 K 线、成交点、FVG 矩形、订单状态和持仓快照，但图表本身不应承担“识别 FVG”“计算仓位”或“发送订单”的职责。

KLineCharts 位于右侧的一个消费方位置。它负责浏览器渲染，不承担策略计算或交易执行，因此可与研究输出和审计导出共享同一份结构化结果。

这样拆分后，一份策略或研究逻辑产生的标注可以被多种消费者使用：浏览器图表、Plotly 研究报告、审计导出或告警服务。渲染样式如何变化，不应改变标注本身的业务含义。

标注需要成为可传输的数据

以 FVG 为例，图表需要的不是某段 UI 绘制代码，而是一条可以被查询和序列化的标注记录：

{
  "kind": "fvg",
  "instrument_id": "EURUSD",
  "start_ts": "2024-01-02T00:00:00Z",
  "end_ts": "2024-01-02T01:30:00Z",
  "lower": 1.08460,
  "upper": 1.08472,
  "status": "active"
}

图表将它转换为矩形、颜色和 hover 文本；研究工具将它用于分组统计；运行服务可用它计算当前仍有效的区间。三者读取同一记录，但各自决定如何使用。

运行展示还需要哪些接口

输入类别	图表或页面可呈现的内容	典型传输方式
K 线与报价	价格走势、周期切换、最新价	批量查询或实时推送
几何标注	FVG、Order Block、关键价位	标注查询或事件流
订单与成交事件	买卖点、拒单、部分成交、延迟	订单事件流
账户与持仓快照	敞口、保证金、盈亏、风险提示	状态查询或定时快照

是否需要 API、WebSocket、账户聚合页或权限管理，属于展示与运行服务的后续设计问题。KLineCharts 只解决其中“在浏览器中绘制时间序列和标注”的一部分。