Highcharts新手求助：列图Tooltip自定义（系列与显示指标不符）

嗨，刚接触Highcharts遇到这种需求太正常了！你现在的情况是图表只有Rencana和Realisasi两个数据系列，但想让Tooltip同时展示第三个Indicator指标，其实不用额外加系列，通过自定义Tooltip的格式化函数就能轻松实现，我给你一步步讲清楚：

核心思路 #

我们不需要把Indicator做成独立的图表系列，只需要把Indicator的对应数据和现有系列关联，然后在Tooltip的formatter函数里手动拼接所有需要显示的内容即可。

具体实现步骤 #

1. 准备好Indicator数据 #

确保你有和现有数据对应的Indicator值，比如每个分类下都有对应的Rencana、Realisasi、Indicator三个值。你可以把它存在某个系列的自定义属性里，或者单独定义一个数组。

2. 配置Tooltip的formatter函数 #

修改你的Highcharts配置，添加tooltip.formatter来自定义Tooltip显示内容，示例代码如下：

{
  chart: {
    renderTo: 'gjenis',
    type: 'column'
  },
  title: {
    text: 'Bauran Energi per Jenis Bahan Bakar (TWh)'
  },
  subtitle: { /* 你的副标题配置内容 */ },
  xAxis: {
    categories: ['Batubara', 'Minyak', 'Gas'] // 替换成你的实际分类
  },
  series: [
    {
      name: 'Rencana',
      data: [50, 30, 20], // 你的实际数据
      // 把Indicator数据存在这个系列的自定义属性里
      indicatorData: [55, 28, 22]
    },
    {
      name: 'Realisasi',
      data: [48, 27, 19]
    }
  ],
  tooltip: {
    formatter: function() {
      // 获取当前点的分类索引，用来匹配对应位置的Indicator数据
      const currentIndex = this.point.index;
      // 从第一个系列中取出对应索引的Indicator值
      const indicatorValue = this.series.chart.series[0].options.indicatorData[currentIndex];
      
      // 拼接Tooltip的显示内容
      let tooltipContent = `<strong>${this.x}</strong><br/>`;
      // 显示当前hover的系列数据
      tooltipContent += `${this.series.name}: ${this.y} TWh<br/>`;
      // 显示另一个系列的数据（如果需要）
      const otherSeries = this.series.name === 'Rencana' ? this.series.chart.series[1] : this.series.chart.series[0];
      tooltipContent += `${otherSeries.name}: ${otherSeries.data[currentIndex].y} TWh<br/>`;
      // 显示Indicator指标
      tooltipContent += `Indicator: ${indicatorValue} TWh`;
      
      return tooltipContent;
    }
  }
}

3. 灵活调整逻辑 #

如果你的Indicator是通过计算得到的（比如Realisasi与Rencana的比值），可以直接在formatter里计算，不用提前存数据：

// 示例：计算完成率作为Indicator
const realisasiValue = this.series.chart.series[1].data[currentIndex].y;
const rencanaValue = this.series.chart.series[0].data[currentIndex].y;
const indicatorValue = ((realisasiValue / rencanaValue) * 100).toFixed(2) + '%';

小提示 #

• 如果你希望不管hover哪个系列，Tooltip都显示三个指标的完整信息，上面的代码已经实现了这个效果；
• 可以根据需求调整Tooltip的样式，比如用HTML标签来优化排版；
• 如果Indicator数据量很大，建议单独维护一个数组，方便管理。

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