lightweight-charts 圆角 K 线Rounded Candles自定义序列插件从示例到正式包的完整实战指南【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts圆角 K 线Rounded Candles是 lightweight-charts 生态中一款以更柔和视觉风格绘制 OHLC 数据形态的自定义序列custom series插件K 线实体以圆角矩形呈现圆角半径随柱间距bar spacing自适应——缩小视图时棱角分明放大视图时圆润柔和。本指南以仓库中的关联文档 plugin-examples/src/plugins/rounded-candles-series/README.md 为核心骨架结合其正式包 packages/lwc-plugin-rounded-candles-series/README.md 与源码实现完整讲解该插件的定位、安装、用法、全部可配置选项及底层渲染原理读完后你可以直接把它作为内置 candlestick 序列的“即插即用”替代品集成进仪表盘、嵌入式组件或营销页面。插件定位从示例“毕业”为官方发布包在 lightweight-charts 仓库中plugin-examples目录长期承载各类自定义序列的演示示例。圆角 K 线最初正是其中之一如今它已毕业为一个独立发布的 npm 包包名tradingview/lwc-plugin-rounded-candles-series源码目录packages/lwc-plugin-rounded-candles-series仓库根目录下遗留的 plugin-examples/src/plugins/rounded-candles-series 仅保留一个重定向 stub 页面 example/index.html用于保证旧画廊 URL 依然可访问该 stub 通过meta http-equivrefresh跳转到新的演示地址。从包元数据 package.json 可以看到它的完整信息版本1.0.0许可证Apache-2.0peerDependencies要求lightweight-charts ^5.0.0并被标记为custom-series类别的官方插件origin: officialtags 为candlestick、custom series、rounded、ohlc。包内包含两个页面演示页src/example/index.html配套脚本src/example/example.ts目录预览页src/example/preview.html配套脚本src/example/preview.ts。在仓库根目录执行以下命令即可把这两个页面从包中构建进文档站点pnpm plugins:build-demos构建产物分别落在文档站的/plugin-demos/rounded-candles-series/与/plugin-previews/rounded-candles-series/两个路径下。安装npm 与 CDN 两种方式插件要求项目中已安装lightweight-charts^5.0.0。通过 npm 安装npm install tradingview/lwc-plugin-rounded-candles-series安装后在业务代码中导入插件类并挂载到图表import { createChart } from lightweight-charts; import { RoundedCandleSeries } from tradingview/lwc-plugin-rounded-candles-series; const chart createChart(document.getElementById(container)); const series chart.addCustomSeries(new RoundedCandleSeries(), { upColor: #089981, downColor: #F23645, wickUpColor: #089981, wickDownColor: #F23645, }); series.setData([ { time: 2024-04-22, open: 100.2, high: 104.6, low: 99.1, close: 103.8 }, { time: 2024-04-23, open: 103.8, high: 105.0, low: 101.4, close: 102.0 }, { time: 2024-04-24, open: 102.0, high: 106.1, low: 101.7, close: 105.4 }, ]);通过 CDN 使用插件以 ES module 形式发布。在纯 HTML 页面中用 import map 把库与插件映射到各自的 CDN 构建产物此处 URL 以占位符示意发布产物路径为插件包的dist/rounded-candles-series.standalone.jsscript typeimportmap { imports: { lightweight-charts: lightweight-charts 的 standalone production 构建 URL, tradingview/lwc-plugin-rounded-candles-series: rounded-candles-series.standalone.js 的 CDN URL } } /script映射完成后即可像在打包器环境中一样按包名导入script typemodule import { createChart } from lightweight-charts; import { RoundedCandleSeries } from tradingview/lwc-plugin-rounded-candles-series; const chart createChart(document.getElementById(container)); const series chart.addCustomSeries(new RoundedCandleSeries(), { upColor: #089981, downColor: #F23645, wickUpColor: #089981, wickDownColor: #F23645, }); series.setData([ { time: 2024-04-22, open: 100.2, high: 104.6, low: 99.1, close: 103.8 }, { time: 2024-04-23, open: 103.8, high: 105.0, low: 101.4, close: 102.0 }, { time: 2024-04-24, open: 102.0, high: 106.1, low: 101.7, close: 105.4 }, ]); /script包入口在 package.json 中通过exports同时暴露了默认入口与./standalone子路径方便不同加载场景。快速上手与内置 K 线同款的数据模型插件渲染与内置 candlestick 序列完全一致的 open-high-low-close 数据。每个数据点形如{ time, open, high, low, close }任意一个 OHLC 值缺失的点会被视为空白whitespace在图表上留出空隙两端的蜡烛颜色互不影响——这一判定逻辑在 rounded-candles-series.ts 的isWhitespace()中实现只要open、high、low、close中有任意一个为undefined该点即视为空白。数据接口定义位于 data.tsRoundedCandleData同时继承内置的CandlestickData与CustomData因而天然支持时间轴类型泛型HorzScaleItem默认Time。RoundedCandleSeriesData是它的弃用别名deprecated新代码请直接使用RoundedCandleData。价格值方面priceValueBuilder 返回[high, low, close]即纵向尺度由最高价、最低价与收盘价共同决定。运行时动态修改选项所有选项都可在运行时通过applyOptions更新例如固定圆角半径series.applyOptions({ radius: 6 });选项总览完整参数表除标准序列选项如priceLineVisible、lastValueVisible、priceFormat、autoscaleInfoProvider等之外该插件专属选项如下选项类型默认值说明upColorstring#26a69a上涨 K 线实体颜色。downColorstring#ef5350下跌 K 线实体颜色。borderVisiblebooleantrue是否绘制实体边框。borderUpColorstring#26a69a上涨 K 线边框颜色。borderDownColorstring#ef5350下跌 K 线边框颜色。borderColorstring—涨跌双向统一的边框颜色只要被设置为非空字符串就优先生效压过borderUpColor/borderDownColor。wickVisiblebooleantrue是否绘制影线。wickUpColorstring#26a69a上涨 K 线影线颜色。wickDownColorstring#ef5350下跌 K 线影线颜色。wickColorstring—涨跌双向统一的影线颜色只要被设置为非空字符串就优先生效压过wickUpColor/wickDownColor。wickLineCapbutt \| roundbutt两条影线端点的形状。radiusnumber \| ((barSpacing: number) number)bs bs 4 ? 0 : bs / 3K 线实体圆角半径CSS 像素单位。可以是常量也可以是以当前柱间距为入参的函数。设为0即为直角 K 线。upDownModeopenClose \| previousCloseopenClose判定 K 线涨跌的方式。openClose比较open close与内置 candlestick 序列完全一致previousClose则与前一根收盘价比较首根 K 线恒视为上涨。hoverDimOpacitynumber1鼠标悬停时除悬停 K 线外其余 K 线的不透明度。1表示悬停时样式不变。默认值集中定义在 options.ts 的defaultOptions中它在customSeriesDefaultOptions之上叠加了上述全部专属默认值。按数据点覆盖颜色除选项外每个数据点还可以携带color、borderColor、wickColor三个字段对单根 K 线覆盖对应选项这正是内置 candlestick 序列支持的按项覆盖能力。颜色解析优先级在 colors.ts 的resolveCandleColors()中实现按项字段 → 双向统一个borderColor/wickColor快捷项 → 涨/跌颜色对逐级回落。包内演示脚本 example.ts 即每 10 根 K 线插入一次rgba(41, 98, 255, 0.5)的半透明覆盖色。关键选项深度解析radius随缩放自适应的圆角半径radius是插件的核心视觉特性。类型RoundedCandleRadius number | ((barSpacing: number) number)定义于 radius.tsresolveRadius()负责把函数形式解析为具体数值。默认实现为radius: (barSpacing) (barSpacing 4 ? 0 : barSpacing / 3)即柱间距小于 4px 时圆角归零保证缩得很小时 K 线清晰锐利否则取柱间距的三分之一。渲染时该值还会乘以水平像素比horizontalPixelRatio换算到位图坐标并通过clampCornerRadius限制半径不超过实体宽度与高度的一半避免过冲见 renderer.ts。upDownMode涨跌判定规则判定逻辑位于 colors.ts 的isUpCandle()openCloseopen close视为上涨与内置 candlestick 行为逐位一致previousClose与上一数据点的收盘价比较close previousClose首根 K 线的“前收盘”视为-Infinity因此必然为上涨。注意插件尚是示例时期的行为就是previousClose语义。upDownMode: previousClose可以还原旧行为。borderColor / wickColor绘制时解析可回退与内置序列不同本插件的borderColor与wickColor在每次绘制时实时解析见 renderer.ts 的resolveCandleColors调用点因此把它们设置为空字符串即可恢复使用borderUpColor/borderDownColor这对涨跌配色。内置序列则是在applyOptions时一次性拷贝进涨/跌对无法这样回退。渲染原理源码级拆解渲染器RoundedCandleSeriesRenderer继承自tradingview/lwc-toolkit的CustomSeriesRendererBase绘制流程分为“影线优先、实体在后”两趟见 renderer.ts。影线的两段式绘制影线并非画在实体背后的一条完整竖线而是在实体上下方各画一段_drawWicks中的_fillWickSegment两次调用。这样当实体采用半透明颜色时影线不会透过实体本身显现出来。影线宽度取min(gridAndCrosshairBitmapWidth, 实体宽度)wickLineCap: round时每段端点用roundRect绘制成圆帽否则使用fillRect。实体的圆角矩形绘制实体使用CanvasRenderingContext2D.roundRect绘制这是库支持的所有浏览器均提供的 API并通过 lwc-toolkit 的drawRoundRectWithBorder同时完成填充与描边。若实体宽度过窄、不足以同时容纳边框与填充line.length borderWidth * 2则整块矩形直接以边框色填充。窄实体场景下实体的视觉表达因此保持稳定见 renderer.ts。悬停高亮与淡出当宿主host支持自定义序列命中测试时Lightweight Charts™ 5.1 及之后渲染器通过hitTest()报告光标下的 K 线drawImpl据此得知hitTestData指向的悬停项。悬停时非悬停 K 线统一乘以hoverDimOpacity默认1即不变化globalAlpha按每根 K 线分别设置实现平滑的“其余 K 线淡出”效果见 renderer.ts。数据合并conflation语义图表在高数据量下会合并相邻数据点插件通过conflationReducer定制合并规则见 rounded-candles-series.ts开盘取第一根、收盘取最后一根、高低取两者极值high取 max、low取 min并保留第一根 K 线的按项颜色覆盖。该实现以本地声明的RoundedCandleConflationContext类型规避对 5.0.0 的强依赖保证包在lightweight-charts5.0.0 下也能通过类型检查。自适应柱间距effectiveBarSpacing()会把conflationFactor合并系数纳入柱间距计算使圆角半径与命中测试的半槽宽halfSlot在数据合并时依然与视觉柱宽保持一致。实战示例与验证包内 src/example/example.ts 是一个可直接运行的交互式演示生成 60 根带涨跌配色的 K 线每 10 根注入一次按项颜色覆盖并在中间插入一段仅有 time 的空白区间data[i] { time: ... }用于展示空白间隙效果页面同时提供radius自动/固定数值、wick可见性与线帽、border隐藏/对比色三个下拉控件实时调用applyOptions反馈渲染变化最后timeScale().fitContent()适配可视范围。插件的正确性由多级测试保障单元测试 tests/unit/radius.spec.ts 与 tests/unit/colors.spec.ts 分别覆盖半径解析与颜色优先级图形测试 tests/graphics 覆盖了default、border-and-wick、no-border-no-wick、inverted-wicks、per-bar-colors、radius-and-colors、up-down-mode、whitespace-gap、hover-highlight、side-by-side-builtin与内置 K 线并排对比、empty-visible-range等十余种渲染场景类型测试 tests/type-checks/api.ts 校验公开 API 的类型契约。使用注意事项小结涨跌判定默认openClose语义open close为涨与内置 candlestick 完全一致previousClose可还原插件示例时期的旧行为。颜色回退borderColor/wickColor在绘制时解析设为空字符串即可恢复涨/跌颜色对——这是与内置序列applyOptions时一次性拷贝不同的行为请勿混淆。半透明实体影线分上下两段绘制半透明实体不会透出自身影线。悬停与合并在支持hitTest的宿主上5.1可报告光标下 K 线并联动悬停淡出数据合并采用“open 首、close 尾、高低取极值”的规则。圆角依赖圆角绘制使用CanvasRenderingContext2D.roundRect该 API 在库所支持的所有浏览器中均可用。旧 URL 兼容示例目录中的 example/index.html 是重定向 stub实际内容一律以包内 src/example 为准勿在旧位置二次维护。总结圆角 K 线插件把内置 candlestick 的 OHLC 语义与一套随缩放自适应、可完全自定义的圆角渲染方案打包成一个官方 npm 包。无论你是想快速替换内置 K 线以获得更柔和的视觉风格还是需要研究 lightweight-charts 自定义序列custom series渲染、命中测试、数据合并的完整实现范式packages/lwc-plugin-rounded-candles-series 都是一份可直接阅读、可直接运行、有完整测试背书的高质量参考实现。【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 lightweight-charts 圆角 K 线（Rounded Candles）自定义序列插件：从示例到正式包的完整实战指南
lightweight-charts 圆角 K 线Rounded Candles自定义序列插件从示例到正式包的完整实战指南【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts圆角 K 线Rounded Candles是 lightweight-charts 生态中一款以更柔和视觉风格绘制 OHLC 数据形态的自定义序列custom series插件K 线实体以圆角矩形呈现圆角半径随柱间距bar spacing自适应——缩小视图时棱角分明放大视图时圆润柔和。本指南以仓库中的关联文档 plugin-examples/src/plugins/rounded-candles-series/README.md 为核心骨架结合其正式包 packages/lwc-plugin-rounded-candles-series/README.md 与源码实现完整讲解该插件的定位、安装、用法、全部可配置选项及底层渲染原理读完后你可以直接把它作为内置 candlestick 序列的“即插即用”替代品集成进仪表盘、嵌入式组件或营销页面。插件定位从示例“毕业”为官方发布包在 lightweight-charts 仓库中plugin-examples目录长期承载各类自定义序列的演示示例。圆角 K 线最初正是其中之一如今它已毕业为一个独立发布的 npm 包包名tradingview/lwc-plugin-rounded-candles-series源码目录packages/lwc-plugin-rounded-candles-series仓库根目录下遗留的 plugin-examples/src/plugins/rounded-candles-series 仅保留一个重定向 stub 页面 example/index.html用于保证旧画廊 URL 依然可访问该 stub 通过meta http-equivrefresh跳转到新的演示地址。从包元数据 package.json 可以看到它的完整信息版本1.0.0许可证Apache-2.0peerDependencies要求lightweight-charts ^5.0.0并被标记为custom-series类别的官方插件origin: officialtags 为candlestick、custom series、rounded、ohlc。包内包含两个页面演示页src/example/index.html配套脚本src/example/example.ts目录预览页src/example/preview.html配套脚本src/example/preview.ts。在仓库根目录执行以下命令即可把这两个页面从包中构建进文档站点pnpm plugins:build-demos构建产物分别落在文档站的/plugin-demos/rounded-candles-series/与/plugin-previews/rounded-candles-series/两个路径下。安装npm 与 CDN 两种方式插件要求项目中已安装lightweight-charts^5.0.0。通过 npm 安装npm install tradingview/lwc-plugin-rounded-candles-series安装后在业务代码中导入插件类并挂载到图表import { createChart } from lightweight-charts; import { RoundedCandleSeries } from tradingview/lwc-plugin-rounded-candles-series; const chart createChart(document.getElementById(container)); const series chart.addCustomSeries(new RoundedCandleSeries(), { upColor: #089981, downColor: #F23645, wickUpColor: #089981, wickDownColor: #F23645, }); series.setData([ { time: 2024-04-22, open: 100.2, high: 104.6, low: 99.1, close: 103.8 }, { time: 2024-04-23, open: 103.8, high: 105.0, low: 101.4, close: 102.0 }, { time: 2024-04-24, open: 102.0, high: 106.1, low: 101.7, close: 105.4 }, ]);通过 CDN 使用插件以 ES module 形式发布。在纯 HTML 页面中用 import map 把库与插件映射到各自的 CDN 构建产物此处 URL 以占位符示意发布产物路径为插件包的dist/rounded-candles-series.standalone.jsscript typeimportmap { imports: { lightweight-charts: lightweight-charts 的 standalone production 构建 URL, tradingview/lwc-plugin-rounded-candles-series: rounded-candles-series.standalone.js 的 CDN URL } } /script映射完成后即可像在打包器环境中一样按包名导入script typemodule import { createChart } from lightweight-charts; import { RoundedCandleSeries } from tradingview/lwc-plugin-rounded-candles-series; const chart createChart(document.getElementById(container)); const series chart.addCustomSeries(new RoundedCandleSeries(), { upColor: #089981, downColor: #F23645, wickUpColor: #089981, wickDownColor: #F23645, }); series.setData([ { time: 2024-04-22, open: 100.2, high: 104.6, low: 99.1, close: 103.8 }, { time: 2024-04-23, open: 103.8, high: 105.0, low: 101.4, close: 102.0 }, { time: 2024-04-24, open: 102.0, high: 106.1, low: 101.7, close: 105.4 }, ]); /script包入口在 package.json 中通过exports同时暴露了默认入口与./standalone子路径方便不同加载场景。快速上手与内置 K 线同款的数据模型插件渲染与内置 candlestick 序列完全一致的 open-high-low-close 数据。每个数据点形如{ time, open, high, low, close }任意一个 OHLC 值缺失的点会被视为空白whitespace在图表上留出空隙两端的蜡烛颜色互不影响——这一判定逻辑在 rounded-candles-series.ts 的isWhitespace()中实现只要open、high、low、close中有任意一个为undefined该点即视为空白。数据接口定义位于 data.tsRoundedCandleData同时继承内置的CandlestickData与CustomData因而天然支持时间轴类型泛型HorzScaleItem默认Time。RoundedCandleSeriesData是它的弃用别名deprecated新代码请直接使用RoundedCandleData。价格值方面priceValueBuilder 返回[high, low, close]即纵向尺度由最高价、最低价与收盘价共同决定。运行时动态修改选项所有选项都可在运行时通过applyOptions更新例如固定圆角半径series.applyOptions({ radius: 6 });选项总览完整参数表除标准序列选项如priceLineVisible、lastValueVisible、priceFormat、autoscaleInfoProvider等之外该插件专属选项如下选项类型默认值说明upColorstring#26a69a上涨 K 线实体颜色。downColorstring#ef5350下跌 K 线实体颜色。borderVisiblebooleantrue是否绘制实体边框。borderUpColorstring#26a69a上涨 K 线边框颜色。borderDownColorstring#ef5350下跌 K 线边框颜色。borderColorstring—涨跌双向统一的边框颜色只要被设置为非空字符串就优先生效压过borderUpColor/borderDownColor。wickVisiblebooleantrue是否绘制影线。wickUpColorstring#26a69a上涨 K 线影线颜色。wickDownColorstring#ef5350下跌 K 线影线颜色。wickColorstring—涨跌双向统一的影线颜色只要被设置为非空字符串就优先生效压过wickUpColor/wickDownColor。wickLineCapbutt \| roundbutt两条影线端点的形状。radiusnumber \| ((barSpacing: number) number)bs bs 4 ? 0 : bs / 3K 线实体圆角半径CSS 像素单位。可以是常量也可以是以当前柱间距为入参的函数。设为0即为直角 K 线。upDownModeopenClose \| previousCloseopenClose判定 K 线涨跌的方式。openClose比较open close与内置 candlestick 序列完全一致previousClose则与前一根收盘价比较首根 K 线恒视为上涨。hoverDimOpacitynumber1鼠标悬停时除悬停 K 线外其余 K 线的不透明度。1表示悬停时样式不变。默认值集中定义在 options.ts 的defaultOptions中它在customSeriesDefaultOptions之上叠加了上述全部专属默认值。按数据点覆盖颜色除选项外每个数据点还可以携带color、borderColor、wickColor三个字段对单根 K 线覆盖对应选项这正是内置 candlestick 序列支持的按项覆盖能力。颜色解析优先级在 colors.ts 的resolveCandleColors()中实现按项字段 → 双向统一个borderColor/wickColor快捷项 → 涨/跌颜色对逐级回落。包内演示脚本 example.ts 即每 10 根 K 线插入一次rgba(41, 98, 255, 0.5)的半透明覆盖色。关键选项深度解析radius随缩放自适应的圆角半径radius是插件的核心视觉特性。类型RoundedCandleRadius number | ((barSpacing: number) number)定义于 radius.tsresolveRadius()负责把函数形式解析为具体数值。默认实现为radius: (barSpacing) (barSpacing 4 ? 0 : barSpacing / 3)即柱间距小于 4px 时圆角归零保证缩得很小时 K 线清晰锐利否则取柱间距的三分之一。渲染时该值还会乘以水平像素比horizontalPixelRatio换算到位图坐标并通过clampCornerRadius限制半径不超过实体宽度与高度的一半避免过冲见 renderer.ts。upDownMode涨跌判定规则判定逻辑位于 colors.ts 的isUpCandle()openCloseopen close视为上涨与内置 candlestick 行为逐位一致previousClose与上一数据点的收盘价比较close previousClose首根 K 线的“前收盘”视为-Infinity因此必然为上涨。注意插件尚是示例时期的行为就是previousClose语义。upDownMode: previousClose可以还原旧行为。borderColor / wickColor绘制时解析可回退与内置序列不同本插件的borderColor与wickColor在每次绘制时实时解析见 renderer.ts 的resolveCandleColors调用点因此把它们设置为空字符串即可恢复使用borderUpColor/borderDownColor这对涨跌配色。内置序列则是在applyOptions时一次性拷贝进涨/跌对无法这样回退。渲染原理源码级拆解渲染器RoundedCandleSeriesRenderer继承自tradingview/lwc-toolkit的CustomSeriesRendererBase绘制流程分为“影线优先、实体在后”两趟见 renderer.ts。影线的两段式绘制影线并非画在实体背后的一条完整竖线而是在实体上下方各画一段_drawWicks中的_fillWickSegment两次调用。这样当实体采用半透明颜色时影线不会透过实体本身显现出来。影线宽度取min(gridAndCrosshairBitmapWidth, 实体宽度)wickLineCap: round时每段端点用roundRect绘制成圆帽否则使用fillRect。实体的圆角矩形绘制实体使用CanvasRenderingContext2D.roundRect绘制这是库支持的所有浏览器均提供的 API并通过 lwc-toolkit 的drawRoundRectWithBorder同时完成填充与描边。若实体宽度过窄、不足以同时容纳边框与填充line.length borderWidth * 2则整块矩形直接以边框色填充。窄实体场景下实体的视觉表达因此保持稳定见 renderer.ts。悬停高亮与淡出当宿主host支持自定义序列命中测试时Lightweight Charts™ 5.1 及之后渲染器通过hitTest()报告光标下的 K 线drawImpl据此得知hitTestData指向的悬停项。悬停时非悬停 K 线统一乘以hoverDimOpacity默认1即不变化globalAlpha按每根 K 线分别设置实现平滑的“其余 K 线淡出”效果见 renderer.ts。数据合并conflation语义图表在高数据量下会合并相邻数据点插件通过conflationReducer定制合并规则见 rounded-candles-series.ts开盘取第一根、收盘取最后一根、高低取两者极值high取 max、low取 min并保留第一根 K 线的按项颜色覆盖。该实现以本地声明的RoundedCandleConflationContext类型规避对 5.0.0 的强依赖保证包在lightweight-charts5.0.0 下也能通过类型检查。自适应柱间距effectiveBarSpacing()会把conflationFactor合并系数纳入柱间距计算使圆角半径与命中测试的半槽宽halfSlot在数据合并时依然与视觉柱宽保持一致。实战示例与验证包内 src/example/example.ts 是一个可直接运行的交互式演示生成 60 根带涨跌配色的 K 线每 10 根注入一次按项颜色覆盖并在中间插入一段仅有 time 的空白区间data[i] { time: ... }用于展示空白间隙效果页面同时提供radius自动/固定数值、wick可见性与线帽、border隐藏/对比色三个下拉控件实时调用applyOptions反馈渲染变化最后timeScale().fitContent()适配可视范围。插件的正确性由多级测试保障单元测试 tests/unit/radius.spec.ts 与 tests/unit/colors.spec.ts 分别覆盖半径解析与颜色优先级图形测试 tests/graphics 覆盖了default、border-and-wick、no-border-no-wick、inverted-wicks、per-bar-colors、radius-and-colors、up-down-mode、whitespace-gap、hover-highlight、side-by-side-builtin与内置 K 线并排对比、empty-visible-range等十余种渲染场景类型测试 tests/type-checks/api.ts 校验公开 API 的类型契约。使用注意事项小结涨跌判定默认openClose语义open close为涨与内置 candlestick 完全一致previousClose可还原插件示例时期的旧行为。颜色回退borderColor/wickColor在绘制时解析设为空字符串即可恢复涨/跌颜色对——这是与内置序列applyOptions时一次性拷贝不同的行为请勿混淆。半透明实体影线分上下两段绘制半透明实体不会透出自身影线。悬停与合并在支持hitTest的宿主上5.1可报告光标下 K 线并联动悬停淡出数据合并采用“open 首、close 尾、高低取极值”的规则。圆角依赖圆角绘制使用CanvasRenderingContext2D.roundRect该 API 在库所支持的所有浏览器中均可用。旧 URL 兼容示例目录中的 example/index.html 是重定向 stub实际内容一律以包内 src/example 为准勿在旧位置二次维护。总结圆角 K 线插件把内置 candlestick 的 OHLC 语义与一套随缩放自适应、可完全自定义的圆角渲染方案打包成一个官方 npm 包。无论你是想快速替换内置 K 线以获得更柔和的视觉风格还是需要研究 lightweight-charts 自定义序列custom series渲染、命中测试、数据合并的完整实现范式packages/lwc-plugin-rounded-candles-series 都是一份可直接阅读、可直接运行、有完整测试背书的高质量参考实现。【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考