Highcharts同步图表与其他图表组合时tooltip异常问题求助

我帮你排查下这个问题哈～

你的推测方向是对的，问题大概率出在同步逻辑错误遍历了页面上所有Highcharts实例（也就是Highcharts.charts），导致tooltip的事件被绑定到了所有图表上，哪怕是不需要同步的图表也被牵连了。

解决思路&具体步骤 #

1. 精准管理需要同步的图表
   不要直接用Highcharts.charts（它会包含页面上所有Highcharts图表），而是单独创建一个数组来存储需要同步的图表实例，比如syncTargetCharts = []，在初始化同步图表时把实例push进去。

2. 修改同步事件的处理范围
   只遍历你专门维护的同步图表数组，排除当前触发事件的图表，避免循环调用自身，同时完全不影响其他无关图表。

3. 补充鼠标移出时的tooltip隐藏逻辑
   确保鼠标离开同步图表时，所有关联的同步图表tooltip都能正确隐藏，避免残留显示。

代码示例参考 #

// 专门存储需要同步的图表实例
const syncTargetCharts = [];

// 初始化第一个同步图表
const syncChart1 = Highcharts.chart('sync-container-1', {
  // 你的图表配置项
});
syncTargetCharts.push(syncChart1);

// 初始化第二个同步图表
const syncChart2 = Highcharts.chart('sync-container-2', {
  // 你的图表配置项
});
syncTargetCharts.push(syncChart2);

// 初始化不需要同步的普通图表
const normalChart = Highcharts.chart('normal-container', {
  // 你的图表配置项
});

// 给同步图表绑定鼠标移动事件
syncTargetCharts.forEach(currentChart => {
  currentChart.container.addEventListener('mousemove', e => {
    const activePoint = currentChart.pointer.normalize(e);
    // 只遍历同步目标图表
    syncTargetCharts.forEach(targetChart => {
      if (targetChart !== currentChart && activePoint.index !== undefined) {
        const targetPoint = targetChart.series[0].points[activePoint.index];
        if (targetPoint) {
          targetChart.tooltip.refresh(targetPoint);
        }
      }
    });
  });

  // 鼠标移出时隐藏所有同步图表的tooltip
  currentChart.container.addEventListener('mouseout', () => {
    syncTargetCharts.forEach(targetChart => {
      targetChart.tooltip.hide();
    });
  });
});

这样修改后，只有你指定的同步图表会响应tooltip同步逻辑，普通图表的tooltip行为就会恢复正常啦。

内容的提问来源于stack exchange，提问作者Kees de Jager