前端图表库金融科技数据可视化【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址https://gitcode.com/gh_mirrors/li/lightweight-charts点击查看免费下载导读Lightweight Charts™lightweight-charts是一款基于 HTML5 Canvas 的高性能金融图表库其核心能力之一就是提供多种开箱即用的系列类型Series TypesArea面积、Bar条形、Baseline基准线、Candlestick蜡烛、Histogram柱状与 Line折线。本指南以 v4.x 文档 series-types.md 为主线逐一讲解每种系列对应的创建方法、数据格式、可定制样式选项并结合仓库源码src/model/series/下的系列定义与默认值给出底层实现依据。读完本文你将能够准确选择系列类型、正确构造数据、并掌握“创建时设置默认选项”与“运行时applyOptions动态更新”两种完整的定制路径。系列定制总览任何系列都可以被定制在 Lightweight Charts 中任何类型的系列都支持定制但可用的选项集合取决于系列的具体类型每种系列都有各自的 Style Options 接口。系列选项本质上由两部分叠加而成通用选项SeriesOptionsCommon所有系列共享的选项如title、visible、priceLineVisible、priceFormat等专属样式选项如AreaStyleOptions、BarStyleOptions、CandlestickStyleOptions……每种类型特有的外观配置。方式一创建系列时指定默认选项每一个创建系列的方法都带有一个可选的options参数在创建的同时即可完成默认样式配置// 在创建 area series 时修改默认的 top bottom 颜色 const series chart.addAreaSeries({ topColor: red, bottomColor: green, });方式二使用applyOptions运行时动态更新借助ISeriesApi.applyOptions方法可以在图表运行过程中随时变更任意可配置项// 运行时更新 candlestick series 的选项 candlestickSeries.applyOptions({ upColor: red, downColor: blue, });从源码看applyOptions在 series-api.ts 中通过this._series.applyOptions(options)将选项写入系列实例并触发图表重绘model.updateSource(this._series)、model.fullUpdate()因此动态改样式是即时生效的。通用选项的默认值源码级所有系列共享的SeriesOptionsCommon默认值定义在 series-options-defaults.ts选项默认值说明title系列名称显示在最新价格标签旁visibletrue系列可见性隐藏时价格线、基线、标签与标记一并隐藏hitTestTolerance3命中测试的额外像素容差lastValueVisibletrue价格轴上最新可见价格标签的可见性priceLineVisibletrue是否显示最新价格水平线priceLineSourcePriceLineSource.LastBar价格线取值来源最后一根 bar / 当前视口最后可见数据priceLineWidth1价格线宽度priceLineColor价格线颜色默认跟随系列颜色priceLineStyleLineStyle.Dashed价格线样式baseLineVisibletrue基准线可见性适用于百分比、IndexedTo100 刻度baseLineColor#B2B5BE基准线颜色baseLineStyleLineStyle.Solid基准线样式priceFormat{ type: price, precision: 2, minMove: 0.01 }价格格式化配置priceFormat支持三种内置类型price最常用可定制精度与舍入、volume自动缩写如1.2K、12.67M、percent价格后追加%还支持type: custom配合自定义formatter函数。minMove决定价格的最小变动步长未显式指定precision时由 precisionByMinMove 根据minMove自动推算小数位例如minMove0.01得到 2 位小数minMove0.05则价格按 1.10、1.15、1.20 的节奏跳动。一、Area面积图创建方法IChartApi.addAreaSeries数据格式SingleValueData或WhitespaceData样式选项SeriesOptionsCommon与AreaStyleOptions的混合面积图本质上是连接所有数据点的折线与时间刻度线之间的着色区域const chartOptions { layout: { textColor: CHART_TEXT_COLOR, background: { type: solid, color: CHART_BACKGROUND_COLOR } } }; const chart createChart(document.getElementById(container), chartOptions); const areaSeries chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR }); const data [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }]; areaSeries.setData(data); chart.timeScale().fitContent();数据格式SingleValueData面积系列的数据点是一个{ value, time }结构见>const chartOptions { layout: { textColor: CHART_TEXT_COLOR, background: { type: solid, color: CHART_BACKGROUND_COLOR } } }; const chart createChart(document.getElementById(container), chartOptions); const barSeries chart.addBarSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR }); const data [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }]; barSeries.setData(data); chart.timeScale().fitContent();数据格式OHLC 结构Bar 系列的数据点是完整的OHLC开高低收结构{ open, high, low, close, time }其基础接口OhlcData定义于>const chartOptions { layout: { textColor: CHART_TEXT_COLOR, background: { type: solid, color: CHART_BACKGROUND_COLOR } } }; const chart createChart(document.getElementById(container), chartOptions); const baselineSeries chart.addBaselineSeries({ baseValue: { type: price, price: 25 }, topLineColor: BASELINE_TOP_LINE_COLOR, topFillColor1: BASELINE_TOP_FILL_COLOR1, topFillColor2: BASELINE_TOP_FILL_COLOR2, bottomLineColor: BASELINE_BOTTOM_LINE_COLOR, bottomFillColor1: BASELINE_BOTTOM_FILL_COLOR1, bottomFillColor2: BASELINE_BOTTOM_FILL_COLOR2 }); const data [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }]; baselineSeries.setData(data); chart.timeScale().fitContent();数据格式与 Area 相同使用{ value, time }的SingleValueData或WhitespaceData。样式选项与默认值BaselineStyleOptions定义于 series-options.ts默认值位于 baseline-series.ts选项默认值说明baseValue{ type: price, price: 0 }基准值配置目前仅支持price类型relativeGradientfalse渐变是否相对基准值与当前可见区间topFillColor1rgba(38, 166, 154, 0.28)上区域第一渐变色topFillColor2rgba(38, 166, 154, 0.05)上区域第二渐变色topLineColorrgba(38, 166, 154, 1)基准线上方折线颜色bottomFillColor1rgba(239, 83, 80, 0.05)下区域第一渐变色bottomFillColor2rgba(239, 83, 80, 0.28)下区域第二渐变色bottomLineColorrgba(239, 83, 80, 1)基准线下方折线颜色lineWidth3折线宽度lineStyle/lineTypeSolid/Simple折线样式与类型lineVisibletrue是否显示折线pointMarkersVisiblefalse数据点圆点标记可见性crosshairMarkerVisible/crosshairMarkerRadiustrue/4十字光标标记lastPriceAnimationDisabled最新价格动画模式四、Candlestick蜡烛图创建方法IChartApi.addCandlestickSeries数据格式CandlestickData或WhitespaceData样式选项SeriesOptionsCommon与CandlestickStyleOptions的混合蜡烛图以“蜡烛”形态呈现价格变动开盘价与收盘价构成蜡烛的实体body影线wick又称上下影线表示该时间区间内的最高价与最低价const chartOptions { layout: { textColor: CHART_TEXT_COLOR, background: { type: solid, color: CHART_BACKGROUND_COLOR } } }; const chart createChart(document.getElementById(container), chartOptions); const candlestickSeries chart.addCandlestickSeries({ upColor: BAR_UP_COLOR, downColor: BAR_DOWN_COLOR, borderVisible: false, wickUpColor: BAR_UP_COLOR, wickDownColor: BAR_DOWN_COLOR }); const data [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }]; candlestickSeries.setData(data); chart.timeScale().fitContent();数据格式与 Bar 一样使用{ open, high, low, close, time }OHLC 结构继承自 OhlcData。CandlestickData在 OHLC 基础上额外支持三个可选字段color整根蜡烛颜色、borderColor边框颜色、wickColor影线颜色用于逐点覆盖data-consumer.ts。样式选项与默认值CandlestickStyleOptions定义于 series-options.ts默认值位于 candlestick-series.ts选项默认值说明upColor#26a69a上涨蜡烛颜色downColor#ef5350下跌蜡烛颜色wickVisibletrue是否显示影线高低价线borderVisibletrue是否显示蜡烛边框borderColor#378658边框颜色通用borderUpColor#26a69a上涨蜡烛边框颜色borderDownColor#ef5350下跌蜡烛边框颜色wickColor#737375影线颜色通用wickUpColor#26a69a上涨蜡烛影线颜色wickDownColor#ef5350下跌蜡烛影线颜色注意源码中的一个小细节fillUpDownCandlesticksColorsseries-options.ts会在只提供borderColor或wickColor时自动将其复制为对应的 up/down 变体保证旧式单色配置依然生效。五、Histogram柱状图创建方法IChartApi.addHistogramSeries数据格式HistogramData或WhitespaceData样式选项SeriesOptionsCommon与HistogramStyleOptions的混合柱状图是数值分布的图形化呈现它按区间生成竖柱columns并统计落入每个区间的数值数量。除了作为独立的分布图它最典型的用法是作为成交量副图叠放在价格系列下方const chartOptions { layout: { textColor: CHART_TEXT_COLOR, background: { type: solid, color: CHART_BACKGROUND_COLOR } } }; const chart createChart(document.getElementById(container), chartOptions); const histogramSeries chart.addHistogramSeries({ color: HISTOGRAM_COLOR }); const data [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922, color: red }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722, color: red }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922, color: red }]; histogramSeries.setData(data); chart.timeScale().fitContent();注意示例数据中第 5、7、10 个数据点带有color: red字段——这正是HistogramData支持逐点着色的体现color缺省时使用系列选项中的颜色指定时则覆盖该柱data-consumer.ts。这常用于“放量日标红”之类的可视化需求。样式选项与默认值HistogramStyleOptions定义于 series-options.ts默认值位于 histogram-series.ts是全部类型中最为精简的选项默认值说明color#26a69a柱体颜色base0柱体的初始基线水平即零轴位置六、Line折线图创建方法IChartApi.addLineSeries数据格式LineData或WhitespaceData样式选项SeriesOptionsCommon与LineStyleOptions的混合折线图将数据点用直线段依次连接是最通用、最轻量的时间序列呈现方式适合指数、均线、指标值等连续数据const chartOptions { layout: { textColor: CHART_TEXT_COLOR, background: { type: solid, color: CHART_BACKGROUND_COLOR } } }; const chart createChart(document.getElementById(container), chartOptions); const lineSeries chart.addLineSeries({ color: LINE_LINE_COLOR }); const data [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }]; lineSeries.setData(data); chart.timeScale().fitContent();数据格式LineData是SingleValueData的扩展支持可选的color字段做逐点着色data-consumer.ts例如在超阈值的数据点上标记特殊颜色。样式选项与默认值LineStyleOptions定义于 series-options.ts默认值位于 line-series.ts选项默认值说明color#2196f3折线颜色lineStyleSolid线条样式实线 / 虚线等lineWidth3线条宽度像素lineTypeSimple线条类型Simple / WithSteps / CurvelineVisibletrue是否显示线条pointMarkersVisiblefalse是否在每个数据点显示圆点标记pointMarkersRadiusundefined圆点标记半径crosshairMarkerVisibletrue是否显示十字光标标记crosshairMarkerRadius4十字光标标记半径crosshairMarkerBorderColor十字光标标记边框色空字符串时回退为系列颜色crosshairMarkerBackgroundColor十字光标标记背景色空字符串时回退为系列颜色crosshairMarkerBorderWidth2十字光标标记边框宽度lastPriceAnimationDisabled最新价格动画模式lineType支持Simple直线连接、WithSteps阶梯线与Curve曲线平滑三种模式可在渲染层面改变折线的呈现形态。七、WhitespaceData为时间轴占位的空白数据文档中每种系列的数据格式都提到了WhitespaceData这是 Lightweight Charts 中一个非常实用但容易被忽略的概念。WhitespaceData仅包含time字段可选携带customValues见>const series chart.addSeries(AreaSeries, { topColor: red, bottomColor: green, });两种写法完全等价v4 的addAreaSeries等旧方法在 v5 中保留为兼容层而addSeries则将系列类型作为一等参数传入同时为自定义系列插件addCustomSeries见 ichart-api.ts铺平了道路。本仓库配套的 v5 文档 website/docs/series-types.mdx 即采用新写法并新增了“Custom series (plugins)”章节。无论使用哪种版本写法本文讲解的数据格式与样式选项体系保持一致。结语与继续深入本文完整覆盖了 Lightweight Charts 的六种内置系列类型。选择一个系列类型时核心决策点有三个数据结构手头是 OHLC 数据Bar / Candlestick还是单值数据Area / Baseline / Line / Histogram呈现意图需要价格涨跌实体Candlestick、价格区间条Bar、围绕基准线的上下色带Baseline、渐变面积Area、连续曲线Line还是分布柱Histogram定制深度创建时的默认选项 运行时的applyOptions双通道已覆盖绝大多数需求若需要全新的可视化形态可进一步研究仓库中的自定义系列插件体系src/plugins 与 plugin-examples。想要在真实项目中验证以上行为可以在仓库内运行pnpm install后启动开发服务器或直接参考 debug/default 目录下的最小可运行示例将示例数据替换为实际行情即可。更多系列类型的样式细节还可以对照 series-options.ts 中每个XxxStyleOptions接口的 JSDoc 注释以及>赞分享前端图表库金融科技数据可视化【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址https://gitcode.com/gh_mirrors/li/lightweight-charts点击查看免费下载相关推荐gpui-kit 数据可视化实战Chart 组件体系Line/Bar/Area/Pie/Radar/Candlestick/Sankey完全指南gpui kit 数据可视化实战Chart 组件体系Line/Bar/Area/Pie/Radar/Candlestick/Sankey完全指南 本文以桌面应用UI组件前端Lightweight Charts™ 多窗格Panes完整指南系列分区、外观定制与生命周期管理Lightweight Charts™ 多窗格Panes完整指南系列分区、外观定制与生命周期管理 Panes窗格是 Lightweight Chart前端图表库金融科技数据可视化TradingView Lightweight Charts 系列类型详解TradingView Lightweight Charts 系列类型详解 概述 TradingView Lightweight Charts 是一个高性能的金前端图表库金融科技数据可视化上一篇如何在Linux上实现3倍游戏帧率提升lsfg-vk无损缩放帧生成终极指南下一篇Orbit数据导出完全指南GraphML与JSON格式详解连接Gephi进行链上深度分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考