Highcharts子弹图：如何为柱状条与目标线配置不同的Tooltip

嗨，我来帮你搞定这个问题！要实现子弹图的柱状条和目标线分别显示不同tooltip，核心就是利用Highcharts的tooltip.formatter函数，通过判断当前悬浮的系列来返回对应的内容，操作起来其实很简单~

首先，你需要确保Tooltip的shared属性设置为false——这个很重要，如果设为true的话，悬浮时会把所有系列的内容合并显示，就达不到分开的效果了。

接下来就是写formatter函数，在函数里我们可以通过this.series.name来区分当前是目标线还是柱状条系列，然后返回对应的提示文本。比如假设你的目标线系列名称是Target，柱状条系列名称是Revenue，配置代码可以这样写：

tooltip: {
  shared: false,
  formatter: function() {
    // 判断当前悬浮的系列
    if (this.series.name === 'Target') {
      return `<strong>Target:</strong> ${this.y}`;
    } else if (this.series.name === 'Revenue') {
      return `<strong>Revenue:</strong> ${this.y}`;
    }
    // 兜底返回默认格式，避免意外情况
    return this.defaultLabelFormatter();
  }
}

如果你的系列名称不是这个，只需要把判断条件里的名称改成你实际使用的就好。要是你还想加上分类名称（比如X轴的标签），可以扩展返回的内容，比如：

tooltip: {
  shared: false,
  formatter: function() {
    if (this.series.name === 'Target') {
      return `${this.point.category}<br/><strong>Target:</strong> ${this.y}`;
    } else if (this.series.name === 'Revenue') {
      return `${this.point.category}<br/><strong>Revenue:</strong> ${this.y}`;
    }
    return this.defaultLabelFormatter();
  }
}

这样配置之后，当你悬浮在目标线上时，就会显示类似Target: 250的提示，悬浮在柱状条上时则显示Revenue: 275，完全符合你的需求~

备注：内容来源于stack exchange，提问作者Bhagya Krishna