Highstock同X轴含Null时Tooltip无法精准显示问题求助

需要调整的核心配置项 #

1. 启用Tooltip的shared模式并关闭split #

默认Highstock对同系列同X轴的null数据点会合并处理，开启shared模式能让Tooltip基于X轴坐标捕获所有有效数据点，同时关闭split避免单系列的拆分限制：

tooltip: {
  shared: true,
  split: false
}

2. 自定义Tooltip格式化函数（可选，确保过滤null数据） #

如果默认shared模式的显示不符合需求，可手动遍历同X轴的有效点，定制显示内容：

tooltip: {
  shared: true,
  formatter: function() {
    let content = `<span>${Highstock.dateFormat('%Y-%m-%d %H:%M:%S', this.x)}</span><br/>`;
    this.points.forEach(point => {
      if (point.y !== null) {
        content += `<span style="color:${point.series.color}">● ${point.series.name}: </span>`;
        content += `<b>${point.y}</b><br/>`;
      }
    });
    return content;
  }
}

3. 保留系列的connectNulls: false #

因为你需要在数值变化间设置断点，这个配置必须保持，避免null数据被自动连接：

series: [{
  name: '目标系列',
  data: [/* 包含null的数据集 */],
  connectNulls: false
}]

4. 自定义Tooltip定位（可选，解决位置偏移） #

如果Tooltip出现位置偏移问题，可通过positioner调整坐标：

tooltip: {
  shared: true,
  positioner: function(labelWidth, labelHeight, point) {
    return {
      x: point.plotX + this.chart.plotLeft + 10,
      y: point.plotY + this.chart.plotTop - labelHeight
    };
  }
}

关键原理 #

启用shared模式后，Tooltip不再局限于单系列的单个数据点，而是基于当前X轴坐标捕获所有系列（包括同系列）的有效数据点，再配合null过滤逻辑，就能实现类似多系列的Tooltip触发效果，确保同X轴的有效数据点都能正常显示提示框。

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