用途
本技能面向在 React/Next.js 或 Canvas 应用里集成 TradingView lightweight-charts 的开发者，尤其是遇到蜡烛图或叠加层无声不渲染、十字线行为异常、时间显示错误等问题时。资料强调，该库虽快且开源，但对失败模式极少给出提示，问题往往以“图表看起来是空的”呈现，需要按已知陷阱逐项排查。
主要能力与常见陷阱
-
颜色格式：图表布局中的 background、upColor、downColor 等会进入 Canvas2D 的 fillStyle。Canvas2D 可解析 #rrggbb、rgb()、rgba()、hsl()，但拒绝 oklch()、lab()、color() 等宽色域形式。且读取 CSS 变量再传给图表时，浏览器可能保留宽色域字符串，导致画布无法解析而不显示。资料建议图表消费的 CSS 令牌直接写成十六进制，并用 grep 检查 CSS 变量文件是否出现 oklch()、lab()、color()。
-
自定义系列的 isWhitespace：若对任意行返回 true，图表会在 draw() 前从 data.bars 移除该行，导致渲染器看不到想高亮的会话边界，基于索引的跨行查找也会错位。资料建议始终返回 false，在 draw() 内用 Number.isFinite() 处理 NaN 值行。
-
十字线同步：setCrosshairPosition 位于 IChartApi，不在 ISeriesApi 上，调用形式应为 chart.setCrosshairPosition(price, time, candleSeries)，第三个参数用于指定价格轴标签对应的系列。
-
十字线模式：默认 mode 1 为磁吸，Y 轴会吸附到最近的 OHLC 值，显得跳动。资料建议 crosshair: { mode: 0 } 实现 X、Y 自由浮动；mode 2 为隐藏。
-
时间域一致性：同一图表上所有系列必须共享时间域，否则蜡烛图与自定义叠加层可能同时静默渲染错误。若主图压缩时间、副图使用真实时间，需要为叠加层构建直通时间映射，使 setData 落在蜡烛图的时间域内。
-
压缩市场空档：图表按时间值定位柱子，休市或节假日会形成大段空白。可用逻辑时间把柱子重编号为连续粒度步长，并建立逻辑秒到真实 Unix 秒的映射；同时必须提供 localization.timeFormatter 做真实时间回查，否则十字线提示可能显示 1970 年时间。tickMarkFormatter 只影响坐标轴，提示框使用 timeFormatter。
-
v5 API 变化：series.setMarkers() 已移除，改用独立插件的 createSeriesMarkers(series, markers) 并保留返回句柄；subscribeCrosshairMove 不再返回取消订阅函数，需要自行保存处理函数，并在清理时调用 chart.unsubscribeCrosshairMove(handler)。
使用方式
资料提供的是排查与实现模式，而非安装命令或完整代码。可按上述陷阱逐项核对图表配置：检查颜色是否为十六进制、isWhitespace 是否返回 false、十字线设置位置与模式、各系列时间域是否一致、时间格式化器是否配置、v5 标记与订阅 API 是否按新方式使用。
适用场景
首次在 React/Next.js 中加入 lightweight-charts；构建蜡烛图加叠加层的多系列图；在多个图表实例间同步十字线；设计同时供 Tailwind/CSS 与图表画布使用的颜色令牌；蜡烛图单独正常但加入叠加层后空白；setCrosshairPosition 报“not a function”等情况。
限制
资料未提供安装命令、依赖版本、完整示例代码或官方文档链接；所述参考实现仅说明一种可行结构，并非强制架构。价格、收费、平台支持等信息暂未提供。