TradingView Lightweight Charts 价格刻度(Price Scale)深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00847/article/details/148393864

TradingView Lightweight Charts 价格刻度(Price Scale)深度解析

lightweight-charts Performant financial charts built with HTML5 canvas 项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts

什么是价格刻度

价格刻度（Price Scale），也称为价格轴，是金融图表中关键的垂直坐标轴组件。在TradingView Lightweight Charts中，价格刻度负责将价格数值映射到图表上的坐标位置，反之亦然。这种映射关系会根据以下因素动态调整：

价格刻度模式（线性/对数）
图表高度
当前可见数据范围

价格刻度类型

Lightweight Charts提供了三种价格刻度类型：

左侧刻度（Left Price Scale）：默认显示的左侧垂直轴
右侧刻度（Right Price Scale）：默认显示的右侧垂直轴
叠加刻度（Overlay Price Scale）：可以无限添加的叠加在图表上的刻度

价格刻度示意图

配置价格刻度

基础配置

修改默认价格刻度可以通过以下选项：

const chartOptions = {
    leftPriceScale: {
        visible: true,
        // 其他配置项
    },
    rightPriceScale: {
        visible: false, // 隐藏右侧刻度
        // 其他配置项
    },
    overlayPriceScales: {
        // 叠加刻度的默认配置
    }
};

创建叠加刻度

创建叠加刻度非常简单，只需为系列指定一个非"left"或"right"的priceScaleId：

const series = chart.addLineSeries({
    priceScaleId: "custom-scale"  // 自动创建ID为"custom-scale"的叠加刻度
});

如果该ID的刻度已存在，系列会自动附加到现有刻度上。

访问刻度API

可以通过以下方式获取刻度API对象：

// 通过图表API获取
const priceScale = chart.priceScale('custom-scale');

// 通过系列API获取其关联的刻度
const seriesPriceScale = series.priceScale();

刻度模式详解

Lightweight Charts支持多种价格刻度模式：

普通模式：默认模式，基于可见范围内的价格自动调整
百分比模式：显示相对于某个基准点的百分比变化
索引模式：以某个基准点为100显示相对变化

高级功能

刻度对齐

多个系列可以共享同一刻度，实现价格对齐：

const series1 = chart.addLineSeries({ priceScaleId: "shared-scale" });
const series2 = chart.addLineSeries({ priceScaleId: "shared-scale" });

刻度样式定制

可以通过API深度定制刻度样式：

chart.priceScale('right').applyOptions({
    borderColor: '#FF0000',
    scaleMargins: {
        top: 0.1,
        bottom: 0.2
    },
    // 其他样式选项
});