如何在Highcharts中正确同步共享Tooltip与Crosshair？

修复Shared Tooltip不生效的问题 #

你当前代码里调用tooltip.refresh(p)只传了单个点，而开启shared: true的tooltip需要接收同一X轴位置的所有点的数组，才会显示全系列数值。得调整逻辑，为每个图表收集对应X索引下的所有点，再统一刷新tooltip。

优化大数据集同步性能 #

遍历所有points在数据量大时会严重拖慢响应速度，改用Highcharts内置的getPointAtX方法直接定位对应X位置的点，或者利用X轴的translate方法计算位置，避免全量遍历。同时绘制crosshair时可以直接基于X值操作，不用依赖具体点对象。

完整优化代码示例 #

let highlightFunction = function (point) {
  const targetX = point.x;
  Highcharts.charts.forEach(chart => {
    // 收集当前图表中所有X值匹配的点
    const matchingPoints = chart.series.flatMap(series => {
      // 用getPointAtX快速定位点，比遍历所有points高效
      const foundPoint = series.getPointAtX(targetX);
      return foundPoint ? [foundPoint] : [];
    });

    // 重置之前的hover状态，避免残留高亮
    chart.series.forEach(series => {
      series.points.forEach(p => p.setState());
    });

    // 设置当前匹配点的hover状态
    matchingPoints.forEach(p => p.setState('hover'));

    // 刷新tooltip：传入点数组才能触发shared效果
    if (matchingPoints.length) {
      chart.tooltip.refresh(matchingPoints);
      // 基于X值绘制crosshair，无需依赖点对象
      chart.xAxis[0].drawCrosshair({ chartX: chart.xAxis[0].toPixels(targetX) }, matchingPoints[0]);
    }
  });
};

// 图表初始化示例（以chart1为例）
const chart1 = Highcharts.chart('chart1', {
  tooltip: {
    shared: true // 多系列图表务必开启此配置
  },
  xAxis: {
    crosshair: true
  },
  series: [{
    point: {
      events: {
        mouseOver() {
          highlightFunction(this);
        }
      }
    },
    // 系列数据...
  }, {
    // 第二个系列...
  }]
});

// 其他图表按相同逻辑初始化，确保crosshair和tooltip配置正确

关键优化点说明 #

1. Shared Tooltip修复：通过flatMap收集同一X值的所有点，将数组传入tooltip.refresh()，触发共享tooltip显示全系列数值。
2. 性能提升：用series.getPointAtX(targetX)替代遍历所有points，大数据集下查询效率大幅提升；绘制crosshair时直接用X轴像素位置，减少不必要的计算。
3. 状态重置：每次同步前重置所有点的hover状态，避免残留高亮影响体验。

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