跳到主要内容
AI TradeDesign System
Design System / Charts

图表

图形编码事实,坐标、基线和来源不能缺席。

与工作台共享外观偏好

TrendArea

真实 SVG 封装;价格曲线标注基线。

样本起点样本终点
虚线:首个样本点

归一化序列用于观察形状。不代表具体价格、预期收益或未来走势。

查看用法
<TrendArea points={points} baselineLabel="首个样本点" label="示例走势" />

CandleChart

K 线与成交量同向编码,使用独立组件样例,不代表真实行情。

支持缩放、拖动和十字线查看;成交量位于下方。

查看行情数据表
冻结演示日 K 线
日期开高低收成交量
2026-01-059910298101100
2026-01-0610110399100120
2026-01-0710010499103110
2026-01-05 — 2026-01-07价格范围 98 — 104 元

示例开高低收及成交量。不代表真实行情。

查看用法
<CandleChart candles={candles} ma={ma} label="日 K 示例" />

BarSeries / Donut

数量柱从零起;无方向的构成使用中性灰阶和明确图例。

ABC
样例
  • 样本 A30%
  • 样本 B50%
  • 样本 C20%
查看用法
<BarSeries points={points} label="样本数量" />
<Donut slices={slices} centerLabel="样例" label="样例构成" />

所有数据示例仅用于组件排版演练,不构成投资建议。