前端图表库金融科技数据可视化【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址https://gitcode.com/gh_mirrors/li/lightweight-charts点击查看免费下载本指南以 Lightweight Charts 官方迁移文档website/versioned_docs/version-4.0/migrations/from-v2-to-v3.md为核心系统梳理从 v2 升级到 v3 时必须掌握的两大核心变更Time Scale API 的位置迁移以及全新的双价格刻度left / right / overlay体系。你将学会用chart.timeScale()统一管理时间轴订阅并掌握左价格刻度、隐藏价格刻度、overlay 序列以及刻度左右互移等全部迁移写法同时结合当前仓库源码理解这些 API 的底层实现与默认行为。迁移背景为什么 v3 敢于引入破坏性变更Lightweight Charts 3.0 带来了两项重大改进同时支持两个价格刻度left 与 right以及更完善的时间刻度 API。为了保持 API 的清晰与一致官方选择在这一版本引入破坏性变更breaking change。需要强调的是这次迁移并非推倒重来官方明确表示v3 对旧 API 采用的是弃用deprecated而非移除策略最常见的旧写法在 v3 中依然可用但官方会在未来版本中移除这些兼容支持。从源码看这一承诺在后续版本中确实兑现了——例如 v3 到 v4 的迁移文档website/versioned_docs/version-4.0/migrations/from-v3-to-v4.md中明确列出priceScale选项、overlay属性已被彻底移除直接指向本文档要求按新 API 迁移。Time Scale API可见范围订阅方法的大搬家旧写法v2在 v2 中处理可见时间范围变化需要直接在 chart 对象上订阅chart.subscribeVisibleTimeRangeChange(func); chart.unsubscribeVisibleTimeRangeChange(func);新写法v3v3 将这些方法迁移到了ITimeScaleApi接口见 src/api/itime-scale-api.ts同时新增了两个订阅方法ITimeScaleApi.subscribeVisibleLogicalRangeChangesrc/api/itime-scale-api.tsITimeScaleApi.unsubscribeVisibleLogicalRangeChangesrc/api/itime-scale-api.ts迁移只需两步替换chart.subscribeVisibleTimeRangeChange→chart.timeScale().subscribeVisibleTimeRangeChangechart.unsubscribeVisibleTimeRangeChange→chart.timeScale().unsubscribeVisibleTimeRangeChange源码印证timeScale() 从哪来在 src/api/chart-api.ts 中timeScale()方法返回的是内部持有的ITimeScaleApi实例public timeScale(): ITimeScaleApiHorzScaleItem { return this._timeScaleApi; }ITimeScaleApi接口本身则聚合了时间刻度上的全部操作能力除订阅方法外还包括getVisibleRange、setVisibleRange、getVisibleLogicalRange、setVisibleLogicalRange、fitContent、scrollToPosition以及timeToCoordinate/coordinateToTime等坐标换算方法src/api/itime-scale-api.ts。可见 v3 的设计思路是把时间轴的所有职责收敛到一个独立 API 对象上避免 chart 顶层方法无限膨胀。新订阅方法的使用示例function myVisibleLogicalRangeChangeHandler(newVisibleLogicalRange) { if (newVisibleLogicalRange null) { // 图表无数据时回调传入 null return; } // 处理新的 logical rangefrom / to 均为数字索引 } chart.timeScale().subscribeVisibleLogicalRangeChange(myVisibleLogicalRangeChangeHandler);双价格刻度体系核心概念的彻底重构v3 之前图表只有一个价格刻度通过priceScale.position控制其在左侧、右侧或隐藏。v3 起图表默认拥有两个预定义价格刻度left和right外加任意数量的 overlay覆盖层刻度。完整的行为说明可参考 website/versioned_docs/version-4.0/price-scale.md。默认行为没有任何改变若不指定任何价格刻度选项图表默认显示右侧价格刻度所有序列自动挂到该刻度上。这一默认行为在源码中有直接对应在 src/api/options/chart-options-defaults.ts 中leftPriceScale: { ...priceScaleOptionsDefaults, visible: false, // 左刻度默认隐藏 }, rightPriceScale: { ...priceScaleOptionsDefaults, visible: true, // 右刻度默认可见 }, defaultVisiblePriceScaleId: right, // 序列默认挂到右侧刻度因此如果你没有特殊布局需求旧代码可以原样运行无需任何修改。迁移场景一左侧价格刻度Left price scale旧写法——通过priceScale.position: left把价格刻度画在左侧const chart LightweightCharts.createChart(container, { priceScale: { position: left, }, });新写法——需要分两步先在图表选项中声明左右刻度的显隐再在创建序列时显式指定priceScaleIdconst chart LightweightCharts.createChart(container, { rightPriceScale: { visible: false, }, leftPriceScale: { visible: true, }, }); const histSeries chart.addHistogramSeries({ priceScaleId: left, });官方说明此场景 v3 通过旧 API 依然完全支持但该兼容支持会在未来版本中移除。迁移场景二不显示任何价格刻度No price scale旧写法const chart LightweightCharts.createChart(container, { priceScale: { position: none, }, });新写法——把左右两个刻度都设为不可见const chart LightweightCharts.createChart(container, { leftPriceScale: { visible: false, }, rightPriceScale: { visible: false, }, });同样此场景旧 API 在 v3 中仍兼容但已弃用。需要留意的是隐藏并不等于移除left/right是两个内置刻度无法被删除只能通过visible: false隐藏见 website/versioned_docs/version-4.0/price-scale.md 中 Removing a price scale 一节。迁移场景三创建 Overlay 序列旧写法——通过overlay: true让序列不参与主刻度缩放const histogramSeries chart.addHistogramSeries({ overlay: true, });新写法——为所有 overlay 序列指定同一个空字符串 IDconst histogramSeries chart.addHistogramSeries({ // 所有 overlay 序列必须使用相同的 ID这里是 priceScaleId: , });这里的原理是任何与left、right不同的priceScaleId都会让图表自动创建一个 overlay 价格刻度而则是约定俗成的共享 overlay 刻度 ID——所有 overlay 序列共享同一个隐藏刻度从而保持彼此的缩放关系一致。迁移场景四把价格刻度从右移到左或反向旧写法——先创建图表与序列再通过applyOptions修改priceScale.positionconst chart LightweightCharts.createChart(container); const mainSeries chart.addLineSeries(); // ... chart.applyOptions({ priceScale: { position: left, }, });新写法——同时调整左右刻度的显隐并把序列重新挂载到目标刻度const chart LightweightCharts.createChart(container); const mainSeries chart.addLineSeries(); // ... chart.applyOptions({ leftPriceScale: { visible: true, }, rightPriceScale: { visible: false, }, }); mainSeries.applyOptions({ priceScaleId: left, });官方特别提醒这一场景是旧 API 在 v3 中唯一不支持的情形。如果你在旧代码中使用了运行时动态移动价格刻度的写法必须完成迁移否则在 v3 中会失效。迁移后视角新价格刻度体系的运行机制完成迁移后理解新体系的工作方式能帮你更好地驾驭双刻度布局。刻度的创建是隐式的任何序列只要设置了非left/right的priceScaleId图表就会自动创建对应的 overlay 刻度若该 ID 已存在则直接复用。刻度的销毁同样自动overlay 刻度只要还有至少一个序列挂在上面就存在移除全部关联序列后即被销毁。按 ID 获取刻度 APIIChartApi.priceScale(priceScaleId)方法接收刻度 ID 并返回对应的IPriceScaleApi对象见 src/api/chart-api.tspublic priceScale(priceScaleId: string, paneIndex: number 0): IPriceScaleApi { return new PriceScaleApi(this._chartWidget, priceScaleId, paneIndex); }其中PriceScaleApi的构造与applyOptions实现位于 src/api/price-scale-api.ts它会把针对该刻度的选项变更路由到model().applyPriceScaleOptions(...)。典型组合示例——主序列用左侧刻度、辅助序列用右侧刻度const chart LightweightCharts.createChart(container, { leftPriceScale: { visible: true }, rightPriceScale: { visible: true }, }); const mainLine chart.addLineSeries({ priceScaleId: left }); const volumeHist chart.addHistogramSeries({ priceScaleId: right });迁移检查清单对照以下清单逐项核对你的代码即可完成 v2 → v3 的核心迁移变更点v2 写法v3 写法可见时间范围订阅chart.subscribeVisibleTimeRangeChange(fn)chart.timeScale().subscribeVisibleTimeRangeChange(fn)取消订阅chart.unsubscribeVisibleTimeRangeChange(fn)chart.timeScale().unsubscribeVisibleTimeRangeChange(fn)新增逻辑范围订阅—chart.timeScale().subscribeVisibleLogicalRangeChange(fn)左价格刻度priceScale: { position: left }rightPriceScale: { visible: false }leftPriceScale: { visible: true }序列指定priceScaleId: left隐藏价格刻度priceScale: { position: none }leftPriceScale: { visible: false }rightPriceScale: { visible: false }Overlay 序列overlay: truepriceScaleId: 所有 overlay 共用同一 ID动态移动刻度chart.applyOptions({ priceScale: { position: left } })调整左右刻度显隐 series.applyOptions({ priceScaleId: left })最后一点提醒本文档属于 v4.0 版本快照位于 website/versioned_docs/version-4.0/migrations/from-v2-to-v3.md。在随后的 v3 → v4 升级中见 website/versioned_docs/version-4.0/migrations/from-v3-to-v4.md旧版priceScale图表选项与overlay序列属性被彻底移除chart.priceScale()也被要求必须显式传入刻度 ID如chart.priceScale(right)。也就是说本文档中标注为已弃用但仍支持的旧写法最终在 v4 中被完全清理——尽早按新 API 迁移是避免后续连锁升级成本的最优策略。赞分享前端图表库金融科技数据可视化【免费下载链接】lightweight-chartsPerformant financial charts built with HTML5 canvas项目地址https://gitcode.com/gh_mirrors/li/lightweight-charts点击查看免费下载相关推荐vit_srelpos_small_patch16_224.sw_in1k部署指南轻量级ViT模型的工业级应用优化vit_srelpos_small_patch16_224.sw_in1k部署指南轻量级ViT模型的工业级应用优化 vit_srelpos_small_pat前端图表库金融科技数据可视化TradingView Lightweight Charts 价格刻度(Price Scale)深度解析TradingView Lightweight Charts 价格刻度 Price Scale 深度解析 什么是价格刻度 价格刻度Price Scale也前端图表库金融科技数据可视化终极指南nees-bert-base-portuguese-cased-finetuned-ner在商业应用中的实际案例研究终极指南nees bert base portuguese cased finetuned ner在商业应用中的实际案例研究 简介葡萄牙语命名实体识别技术的前端图表库金融科技数据可视化上一篇Lift-Splat-Shoot中的BEV特征提取从图像到鸟瞰图的高效转换下一篇Picocli构建工具集成终极指南轻松实现Gradle、Maven自动化配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考