Highcharts仅在关联系列间共享提示框的配置问题咨询

我懂你的痛点——开启shared: true后，提示框会把所有系列的数据都列出来，但你只想看到鼠标当前悬停的那个系列（包括它的置信区间或对应折线），效果就像shared: false一样对吧？别担心，有两个实用方案可以实现：

方案1：使用tooltip.filter（推荐，Highcharts 7.0+可用） #

这个方法最简洁，直接过滤掉非悬停系列的点，让提示框只展示当前系列的内容：

tooltip: {
  shared: true,
  // 只保留当前鼠标悬停的系列对应的点
  filter: function(point) {
    return point.series.hovered;
  }
}

原理很简单：Highcharts会给当前被hover的系列加上hovered: true的标记，我们通过这个标记过滤掉其他系列的点，提示框就只会显示你当前关注的系列数据了。

方案2：自定义tooltip.formatter函数 #

如果你需要更灵活地控制提示框的内容格式，可以用formatter函数手动筛选当前点：

tooltip: {
  shared: true,
  formatter: function() {
    // 找到当前悬停系列对应的点
    const activePoint = this.points.find(point => point.series.hovered);
    if (!activePoint) return '';
    
    // 自定义提示内容，这里用默认风格举例
    return `<span style="color:${activePoint.color}">●</span> ${activePoint.series.name}: <b>${activePoint.y}</b><br/>`;
  }
}

额外提示：关联置信区间与平均线 #

如果你的置信区间系列（比如arearange）是和平均线系列（line）关联的，想实现hover平均线时同时显示区间数据，可以给区间系列加上linkedTo: ':previous'，这样两个系列会共享hover状态，过滤时会同时保留它们的点：

series: [
  {
    name: '平均值',
    data: averages,
    zIndex: 1,
    type: 'line'
  },
  {
    name: '置信区间',
    data: ranges,
    type: 'arearange',
    linkedTo: ':previous' // 关联上一个系列
  }
]

这样配置后，不管hover平均线还是置信区间，提示框都会显示这两个关联系列的内容，而不会展示其他无关系列的数据。

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