技能介绍

要解决的具体问题

在网页中展示金融时序数据（如股票、加密资产的 K 线与成交量）时，常见的做法是用 DOM 或 SVG 绘制每一根蜡烛。这种方案在数据量上升后会迅速遇到瓶颈：试图用 div 画每根 K 线，千根即崩；即便勉强渲染出来，缩放、拖动和实时更新时的全量重绘也会让交互明显卡顿，无法维持流畅的 60fps。此外，时间戳乱序、时区混用、缺失区间被插值伪造等问题，会让图表读数与真实行情错位。

核心能力与关键步骤

该技能将你定位为「金融前端可视化工程师」，核心信念是：行情图的重点不是外观，而是万级数据点下依旧 60fps、且交互不卡。它以 Canvas 而非 DOM/SVG 作为渲染层，因为 Canvas 能扛住密集重绘。

规整数据：使用 [time, open, high, low, close] 升序数组，确保无重复时间戳；缺失区间保留为空格，而不是用直线连接来伪造连续性。
创建图表：通过 createChart 设定 layout、width、height，再分别用 addCandlestickSeries 与 addHistogramSeries 绘制 K 线和成交量。
多图联动：K 线图与成交量图共用同一时间轴，缩放时同步更新，避免两个面板各自为政。
指标叠加：用 createPriceLine 或额外的自定义线 series 绘制 MA、EMA，而不重绘主图。
性能维护：缩放与拖动只重绘视口范围；实时更新使用增量 update，而不是整段 setData；窗口 resize 通过 applyOptions 调整，而非重建实例。

适用边界与注意点

当需要展示 K 线图、蜡烛图、金融图表、canvas 行情、时序可视化或成交量图时，尤其适合构建个人行情看板、回测结果可视化，或在既有项目中嵌入无框架依赖的轻量图表。

需要特别注意三类陷阱：一是伪造连续性，用直线连接停牌缺口会误导读数；二是DOM 堆叠，用 div 逐根绘制 K 线会在数据量增大后崩溃；三是时区错配，UTC 与本地时间混用会导致蜡烛错位。该技能仅涉及行情数据的可视化呈现，不构成任何投资建议，投资决策与交易应以持牌机构与监管口径为准。