如何实现多图表间X轴缩放同步？附代码及JSFiddle示例

你的现有代码问题在于仅修改了当前触发事件的图表X轴，未同步另外两个图表。以下是修正后的实现方案：

核心思路 #

• 用全局变量标记同步状态，避免缩放事件循环触发
• 任意图表X轴完成缩放/拖拽后，获取当前极值范围，同步设置给另外两个图表的X轴

完整实现代码 #

// 全局标记，防止同步时循环触发事件
let syncing = false;

// 同步缩放函数
function syncZoom(currentChart, e) {
    if (syncing) return; // 正在同步时跳过，避免循环调用
    syncing = true;

    // 获取当前图表的X轴极值
    const min = e.min ?? e.dataMin;
    const max = e.max ?? e.dataMax;

    // 遍历所有图表，同步X轴极值（排除当前触发的图表）
    Highcharts.charts.forEach(chart => {
        if (chart && chart !== currentChart) {
            chart.xAxis[0].setExtremes(min, max, false, false);
            // 最后两个参数：false=不触发事件（避免循环）；false=不带动画（可按需改为true）
        }
    });

    syncing = false;
}

// 给每个图表绑定X轴缩放事件
// 对应你JSFiddle里的三个图表，初始化时添加事件监听：
Highcharts.chart('container1', {
    // ... 原有配置
    xAxis: {
        // ... 原有配置
        events: {
            setExtremes: function(e) {
                syncZoom(this.chart, e);
            }
        }
    },
    // ... 其他配置
});

Highcharts.chart('container2', {
    // ... 原有配置
    xAxis: {
        // ... 原有配置
        events: {
            setExtremes: function(e) {
                syncZoom(this.chart, e);
            }
        }
    },
    // ... 其他配置
});

Highcharts.chart('container3', {
    // ... 原有配置
    xAxis: {
        // ... 原有配置
        events: {
            setExtremes: function(e) {
                syncZoom(this.chart, e);
            }
        }
    },
    // ... 其他配置
});

关键修改点说明 #

1. 全局syncing变量：避免同步其他图表时再次触发setExtremes事件，导致循环调用
2. 遍历所有图表实例：通过Highcharts.charts获取页面上所有Highcharts实例，排除当前触发图表后同步极值
3. setExtremes参数控制：调用setExtremes时传入最后两个false，第一个禁止触发事件，第二个关闭同步时的动画（按需调整）

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