如何获取lightweight-charts中IPriceScaleAPI的价格范围值以同步滑块？

获取当前价格轴极值 #

lightweight-charts其实提供了获取可见价格范围的API，你可以通过价格轴实例的visibleRange()方法（部分旧版本为getVisibleRange()）直接获取当前价格刻度的最小值和最大值：

// 获取当前价格轴的可见范围
const priceRange = chart.priceScale().visibleRange();
// 提取极值
const currentPriceMin = priceRange.min;
const currentPriceMax = priceRange.max;

监听价格范围变化，同步到滑块 #

当用户拖拽图表调整价格刻度，或图表数据更新导致范围变化时，可通过visible-range-changed事件实时同步滑块的极值：

// 监听价格范围变更事件
chart.subscribeVisibleRangeChanged(() => {
  const priceRange = chart.priceScale().visibleRange();
  // 更新垂直滑块的极值与当前选中范围
  slider.min = priceRange.min;
  slider.max = priceRange.max;
  slider.value = [priceRange.min, priceRange.max];
});

通过滑块控制图表价格范围 #

要让滑块能反向控制图表，需先关闭价格轴的自动缩放，避免手动设置被自动覆盖：

// 初始化时关闭价格轴自动缩放
chart.priceScale().applyOptions({
  autoScale: false,
});

// 监听滑块输入事件，更新图表价格范围
slider.addEventListener('input', () => {
  const [targetMin, targetMax] = slider.value;
  chart.priceScale().setVisibleRange({
    min: targetMin,
    max: targetMax,
  });
});

额外提示 #

• 若图表是多价格轴布局，需通过chart.priceScale('right')或chart.priceScale('left')指定对应轴实例；
• 初始获取价格范围时，建议等图表加载完数据后再调用visibleRange()，避免拿到默认空值。

内容的提问来源于stack exchange，提问作者roysupriyo10