如何在Highcharts中无数据时禁用tooltip？当前会显示最近点提示

算力阿峰

2026-8-2

解决Highcharts柱状图空数据点错误显示tooltip问题

问题场景

使用Highcharts绘制柱状图时，悬停x轴上无任何Y值的点（如示例中第3、4个点），会错误显示其他有数据点的tooltip。需求是：当某个x轴点对应的所有系列数据均为null时，悬停该点不显示tooltip。

解决方案

通过修改tooltip.formatter函数，先判断当前x轴位置的所有系列数据是否全为null，若是则返回false阻止tooltip显示；同时过滤掉tooltip中无效的null值数据。

修改后的完整代码

Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  tooltip: {
    shared: true,
    formatter: function() {
      // 判断当前x轴位置所有系列数据是否全为null
      const allNull = this.chart.series.every(series => {
        const point = series.data[this.x];
        return !point || point.y === null;
      });
      if (allNull) {
        return false; // 全为null时不显示tooltip
      }

      // 生成tooltip内容，过滤掉y为null的系列
      return this.points.reduce((s, point) => {
        if (point.y !== null) {
          return s + '<br/>' + point.series.name + ': ' + point.y + '%';
        }
        return s;
      }, '<b>' + this.x + '</b>');
    },
  },
  series: [{
    data: [null, 30, 5, null, null, 30]
  }, {
    data: [null, 30, 55, null, null, 33]
  }, {
    data: [null, -12, 25, null, null, 23]
  }, {
    data: [null, -3.0, 10, null, null, 23]
  }, {
    data: [null, 7, 100, null, null, 23]
  }]
});