修改ChartXY对象左右拖拽矩形交互：统一设置为放大功能

要实现鼠标从右向左拖拽矩形也执行放大（和左向右拖拽逻辑一致），需要禁用默认的拖拽交互，然后自定义鼠标拖拽的缩放逻辑，具体步骤如下：

1. 关闭默认的矩形缩放/适配行为 #

默认情况下，ChartXY的左拖是放大、右拖是适配全部数据。我们先把这两个内置行为关掉：

const chart = lightningChart().ChartXY()
// 禁用右拖自动适配全部数据的行为
chart.setRectangleZoomFit(false)
// 禁用左拖默认的矩形放大行为，后续我们自己实现统一逻辑
chart.setRectangleZoom(false)

2. 自定义鼠标拖拽缩放逻辑 #

通过监听图表容器的鼠标事件，记录拖拽的起始/结束坐标，最终将轴范围设置为拖拽区域的最小/最大值（不管拖拽方向）：

// 拖拽状态变量
let isDragging = false
let startPoint = { x: 0, y: 0 }
let endPoint = { x: 0, y: 0 }

// 获取图表的DOM容器
const chartContainer = chart.getContainer()

// 鼠标按下：记录拖拽起始点（转换为图表内部坐标）
chartContainer.addEventListener('mousedown', (e) => {
    isDragging = true
    const enginePoint = chart.clientLocation2Engine(e.clientX, e.clientY)
    startPoint = { x: enginePoint.x, y: enginePoint.y }
})

// 鼠标移动：更新拖拽结束点
chartContainer.addEventListener('mousemove', (e) => {
    if (!isDragging) return
    const enginePoint = chart.clientLocation2Engine(e.clientX, e.clientY)
    endPoint = { x: enginePoint.x, y: enginePoint.y }
})

// 鼠标松开：计算缩放范围并应用到轴
chartContainer.addEventListener('mouseup', () => {
    if (!isDragging) return
    isDragging = false

    // 取拖拽区域的最小/最大值，忽略拖拽方向
    const xMin = Math.min(startPoint.x, endPoint.x)
    const xMax = Math.max(startPoint.x, endPoint.x)
    const yMin = Math.min(startPoint.y, endPoint.y)
    const yMax = Math.max(startPoint.y, endPoint.y)

    // 应用到默认X/Y轴
    chart.getDefaultAxisX().setInterval({ start: xMin, end: xMax })
    chart.getDefaultAxisY().setInterval({ start: yMin, end: yMax })
})

补充说明 #

• 如果图表使用了自定义轴（而非默认轴），只需将getDefaultAxisX()/getDefaultAxisY()替换为你的轴对象即可。
• 如需支持触摸设备，可以添加touchstart/touchmove/touchend事件监听，逻辑和鼠标事件一致（注意触摸事件需要取touches[0]的坐标）。

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