如何解决Highcharts多堆叠柱状图悬浮同步时tooltip匹配错误问题

跨图联动时tooltip匹配错误的核心原因是，现有逻辑按数据系列（series）的数组下标匹配目标图表的对应堆叠块，没有按堆叠类型的名称字段匹配。不同图表的series排列顺序、数量不一致时，下标对应关系完全错位，就会出现悬浮A图的installation块，B图错误触发其他系列tooltip的问题。

前置规则 #

所有图表中同类型堆叠块的series.name必须完全一致，比如所有installation类型的系列，name值严格等于installation，不能出现大小写差异、前后空格、别名混用的情况。如果需要更精准的匹配，也可以给同类型系列设置统一的自定义id字段作为匹配标识。

核心逻辑调整 #

把原来按下标找系列的逻辑，替换为按系列名/自定义id遍历匹配，拿到准确的目标点后再触发高亮和tooltip，核心实现代码如下：

// 统一给所有堆叠柱状图绑定联动事件
function bindChartLinkage() {
  Highcharts.charts.forEach(activeChart => {
    activeChart.update({
      plotOptions: {
        bar: { // 若为纵向堆叠柱状图则将此处替换为column
          stacking: 'normal',
          point: {
            events: {
              mouseOver: function() {
                // 记录当前悬浮点的核心匹配参数
                const matchKey = this.series.name; // 若用自定义id匹配则替换为this.series.options.id
                const xAxisValue = this.x;

                // 同步其余图表的状态
                Highcharts.charts.forEach(targetChart => {
                  if (targetChart === activeChart) return;

                  // 按匹配键找对应系列，废弃原有的index下标取值逻辑
                  const targetSeries = targetChart.series.find(series => series.name === matchKey);
                  if (!targetSeries) return;

                  // 找到同x轴位置的对应数据点
                  const targetPoint = targetSeries.points.find(point => point.x === xAxisValue);
                  if (!targetPoint) return;

                  // 触发高亮和对应tooltip
                  targetPoint.setState('hover');
                  targetChart.tooltip.refresh(targetPoint);
                });
              },
              mouseOut: function() {
                // 鼠标移出时清除所有联动状态
                const matchKey = this.series.name;
                const xAxisValue = this.x;

                Highcharts.charts.forEach(targetChart => {
                  if (targetChart === activeChart) return;
                  const targetSeries = targetChart.series.find(series => series.name === matchKey);
                  if (!targetSeries) return;
                  const targetPoint = targetSeries.points.find(point => point.x === xAxisValue);
                  
                  if (targetPoint) targetPoint.setState('');
                  targetChart.tooltip.hide();
                });
              }
            }
          }
        }
      }
    });
  });
}

// 所有图表渲染完成后调用绑定方法
bindChartLinkage();

避坑说明 #

• 如果图表存在多堆叠组的场景，匹配时可以加上series.stack字段的校验，避免同系列名不同堆叠组的点匹配错误。
• 不要硬编码系列的排列顺序，所有匹配逻辑完全依赖业务定义的唯一标识，后续调整图表系列增减、排序时不会影响联动效果。
• 触发高亮前如果目标图表已有其他hover状态的点，会自动被新状态覆盖，不需要额外手动清空。

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