如何在LightningChartJS中限制X轴可缩放范围

可以通过两种方式实现X轴缩放范围的限制，以下是具体方案：

方案一：监听轴缩放事件强制修正范围 #

这是最灵活的方式，既能限制范围，又能尽量保留用户想要的视图宽度，避免生硬的边界锁定：

// 获取图表的默认X轴
const axisX = chart.getDefaultAxisX()

// 设置初始显示范围为目标区间
axisX.setInterval(-0.5, 1.5)

// 关闭轴的自动扩展功能，防止数据驱动轴范围自动变化
axisX.setExtendModes(false, false)

// 监听轴缩放/平移事件，实时修正范围
axisX.onScaleChange(() => {
    const { start: currentMin, end: currentMax } = axisX.getInterval()
    const viewWidth = currentMax - currentMin
    let newMin = currentMin
    let newMax = currentMax

    // 修正左边界：不能小于-0.5
    if (newMin < -0.5) {
        newMin = -0.5
        newMax = newMin + viewWidth
        // 若修正后右边界超过1.5，则锁定右边界，重新计算左边界
        if (newMax > 1.5) {
            newMax = 1.5
            newMin = newMax - viewWidth
        }
    }
    // 修正右边界：不能大于1.5
    else if (newMax > 1.5) {
        newMax = 1.5
        newMin = newMax - viewWidth
        // 若修正后左边界小于-0.5，则锁定左边界，重新计算右边界
        if (newMin < -0.5) {
            newMin = -0.5
            newMax = newMin + viewWidth
        }
    }

    // 应用修正后的范围，关闭动画避免抖动
    axisX.setInterval(newMin, newMax, false)
})

方案二：使用轴的内置范围锁定（简化版） #

如果不需要保留视图宽度，仅需严格限制用户无法访问-0.5左侧或1.5右侧的区域，可以直接设置轴的绝对边界：

const axisX = chart.getDefaultAxisX()

// 设置轴的绝对最小/最大值，直接锁定可缩放范围
axisX.setMin(-0.5)
axisX.setMax(1.5)

// 关闭自动扩展，确保轴范围不会被数据修改
axisX.setExtendModes(false, false)

两种方案的区别：方案一在用户试图超出边界时，会将视图拉回限制区间内并尽量保持原有缩放比例；方案二则直接锁定边界，用户无法缩放或平移到区间外。

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