如何配置LightningChart JS 7.1.1的用户交互功能

需求 #

• 鼠标滚轮滚动：触发图表缩放
• Shift+鼠标滚轮滚动：仅X轴平移
• Ctrl+鼠标滚轮滚动：仅Y轴平移

问题分析 #

当前代码存在两个核心问题：

1. CDN版本与使用的7.1.1版本不匹配（代码中引用了8.0.2的CDN）
2. setUserInteractions的配置结构不符合7.1.1版本的API规范，导致交互逻辑未生效

修正后的代码 #

JavaScript 代码 #

const lc = lcjs.lightningChart();
const chart = lc.ChartXY({
    columnIndex: 0,
    rowIndex: this.rowIndex,
    defaultAxisX: {
        opposite: true
    }
});
const series = chart.addLineSeries();

chart.setTitle('title')
    .setTitlePosition('series-right-top');

chart.setUserInteractions({
    zoom: {
        // 启用鼠标滚轮缩放
        wheel: true
    },
    pan: {
        // 禁用默认鼠标滚轮平移
        wheel: false,
        // Shift+滚轮 触发X轴平移
        shift: {
            wheel: {
                x: true,
                y: false
            }
        },
        // Ctrl+滚轮 触发Y轴平移
        ctrl: {
            wheel: {
                x: false,
                y: true
            }
        }
    },
    // 禁用框选缩放避免冲突
    rectangleZoom: false
});

HTML 引入（对应7.1.1版本） #

<script src="https://cdn.jsdelivr.net/npm/@lightningchart/lcjs@7.1.1/dist/lcjs.iife.js"></script>

关键修改说明 #

1. 版本对齐：将CDN引用替换为7.1.1版本，避免API差异导致的兼容性问题
2. 交互配置结构调整：
   • 滚轮缩放直接设置zoom.wheel: true即可启用
   • Shift/Ctrl修饰符的滚轮平移配置，需要将轴控制参数放在wheel对象内部，这是7.1.1版本的API要求

内容的提问来源于stack exchange，提问作者Ban-deer