如何在Lightweight Charts 4.2.2版本中默认启用图表的自由拖动（含垂直轴）功能？

阿华AIGC实验室

2026-4-14

我来帮你解决这个问题！在Lightweight Charts 4.x（包括你用的4.2.2）版本里，不少旧的配置项已经被调整或整合了，你之前试的部分参数确实因为版本迭代失效了。要实现从一开始就能在图表任意区域自由拖动（同时支持水平时间轴和垂直价格轴的滚动），关键是要正确配置handleScroll和handleScale里的新结构化参数。

问题根源

默认情况下，Lightweight Charts的按住鼠标左键拖动操作，只会触发时间轴（水平方向）的滚动；价格轴（垂直方向）的拖动需要先点击价格轴区域再操作。而你需要的是在图表主体区域直接拖动就能同时控制双轴滚动。

正确的配置代码

直接用下面的配置替换你的测试代码，就能实现需求：

const chart = LightweightCharts.createChart(document.body, {
    width: 400,
    height: 300,
    handleScroll: {
        // 核心配置：允许按住鼠标左键拖动时，同时滚动时间轴和价格轴
        pressedMouseMove: {
            time: true,
            price: true,
        },
        // 可选：开启鼠标滚轮的垂直滚动（根据需求选择）
        mouseWheel: true,
    },
    handleScale: {
        // 确保价格轴支持拖动缩放（如果需要缩放功能的话）
        axisPressedMouseMove: {
            time: true,
            price: true,
        },
    },
    // 显式指定价格轴为正常模式（默认就是Normal，这里可写可不写，用于明确配置意图）
    rightPriceScale: {
        mode: LightweightCharts.PriceScaleMode.Normal,
    },
});

const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
    { time: '2019-04-11', open: 80.01, close: 82, high: 83, low: 79 },
    { time: '2019-04-12', open: 82, close: 81, high: 84, low: 80 },
    { time: '2019-04-13', open: 81, close: 85, high: 86, low: 80 },
]);

chart.timeScale().fitContent();

为什么之前的配置没生效？

vertTouchDrag：这个选项只针对触摸设备的垂直拖动，对鼠标操作完全无效；
旧版本的priceAxisPressedMouseMove、timeAxisPressedMouseMove：在4.x版本中已经被整合到handleScroll.pressedMouseMove和handleScale.axisPressedMouseMove的对象式配置里了，单独的布尔值参数已经被废弃；
如果你只把pressedMouseMove设为true，默认只会开启时间轴的拖动，必须显式指定price: true才能启用价格轴的拖动。