项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

K 线图 candle ​

金融时序的标准表达:每根蜡烛由开、收、高、低四个价构成,涨跌配色一眼可读。行情、股价、以及任何"开-收-高-低"四元组数据。

何时使用 ​

  • 数据天然有开盘/收盘/最高/最低四个值;
  • 关心周期内的涨跌方向与波动区间;
  • 一般时序趋势看折线图更简洁。

示例 ​

专属数据字段 candleData({ label, open, close, high, low }),涨跌自动着色。

个股日 K:两周走势 ​

实战里 label 就是交易日。红涨绿跌(A 股约定)是默认配色,也可用 candleUpColor / candleDownColor 换成港美股习惯;配合 dataZoom 可以在长周期里拖拽浏览。

K 线 + 成交量 ​

volumeData(与 candleData 等长的数值数组)开启副图:绘图区下部 24% 变为成交量带,量柱颜色跟随当日涨跌,价格轴只量价格区。图例出现「成交量」项,点选即隐去量带、K 线回铺全高——价量关系的标准读法。

价量 + 均线 + 区间选择 ​

三件套组合:volumeData 量副图 + candleMa 均线(如 [5, 10],按收盘价画简单移动平均,图例 MA5/MA10/成交量 都可点选显隐)+ dataZoom 数据区间选择(拖滑块/滚轮在长周期里缩放浏览)。趋势判断的标准工作台。

分时图:分钟 K 线 + 量副图 ​

日内高频视角:candleData 换成 5 分钟粒度的四价,量副图照常联动——日内每段拉升都有量柱对应,价量同读。

偏好折线形态时用 type: 'area' 配 volumeData(价格线上区、量柱下区,量柱按价格较前一刻涨跌着色),图例「成交量」同样可点选显隐。

场景提示 ​

  • 股票 / 期货 / 加密货币行情:日 K / 周 K / 分时四价;
  • 基金场外净值只有单值,用折线图看净值曲线更合适;
  • 财务上「预算 vs 决算 vs 上下限」这类开收高低语义的数据,也能复用 K 线表达。

配置要点 ​

  • 字段语义固定:open 开、close 收、high 高、low 低;
  • volumeData 开启成交量副图(K 线 / 折线 / 面积通用),volumeHeight(0.15–0.4)调量带占比,默认 0.24;
  • candleMa: [5, 10, 20] 叠加 MA 均线(收盘价简单移动平均),candleMaColors 可覆写线色,图例点选显隐;
  • 悬浮 tooltip 展示四价明细,params 里带 volume 供自定义 formatter 使用;
  • 长周期序列配合 dataZoom 缩放浏览,见交互与联动。

相关 ​