Highcharts单X轴多Y值tooltip不显示问题及解决需求

针对同一X轴类别下多个Y值仅部分触发Tooltip、且无法展示额外字段的问题，可通过以下配置调整解决：

核心修改点 #

• 调整数据格式：将原[x, y]数组格式改为对象格式，携带display、rtMode、initMode等额外字段，确保每个点的独立属性可被Tooltip读取。
• 优化Tooltip触发逻辑：关闭Tooltip的共享模式，设置按坐标精确匹配最近点，避免同X值点被合并触发。
• 自定义Tooltip内容：通过pointFormatter方法自定义Tooltip显示模板，展示所需的所有字段信息。

修改后的完整配置代码 #

this.chartOptions = {
  series: [
    {
      type: 'line',
      // 改为对象格式存储每个点的完整数据
      data: [
        {x: 0, y: 38.6, display: '显示文本1', rtMode: '模式A', initMode: '初始模式1'},
        {x: 0, y: 49.8, display: '显示文本2', rtMode: '模式B', initMode: '初始模式2'},
        {x: 1, y: 39.2, display: '显示文本3', rtMode: '模式A', initMode: '初始模式3'},
        {x: 1, y: 41.1, display: '显示文本4', rtMode: '模式C', initMode: '初始模式4'},
        {x: 1, y: 46.6, display: '显示文本5', rtMode: '模式B', initMode: '初始模式5'},
        {x: 2, y: 44, display: '显示文本6', rtMode: '模式A', initMode: '初始模式6'}
      ],
      color: '#004191',
      showInLegend: false,
      name: 'price',
      threshold: 40,
      negativeColor: '#F34336',
      marker: {
        enabled: true,
        radius: 3,
        symbol: 'circle',
      },
      // 启用按xy坐标匹配最近点，避免同x值点被合并
      findNearestPointBy: 'xy'
    },
  ],
  title: {
    text: '',
  },
  xAxis: {
    title: {
      text: 'Days',
    },
    categories: ["16-Jan", "15-Jan", "14-Jan"],
  },
  yAxis: {
    title: {
      text: 'price',
    },
    gridLineWidth: 1,
    min: 10,
    max: 100,
    tickPixelInterval: 35,
  },
  tooltip: {
    // 关闭共享模式，每个点单独触发Tooltip
    shared: false,
    split: false,
    // 自定义Tooltip内容，读取点的额外字段
    pointFormatter: function() {
      return `
        <div><b>日期：${this.series.chart.xAxis[0].categories[this.x]}</b></div>
        <div>价格：${this.y}</div>
        <div>显示：${this.display}</div>
        <div>运行模式：${this.rtMode}</div>
        <div>初始模式：${this.initMode}</div>
      `;
    }
  },
  exporting: {
    enabled: false,
    showTable: false,
    buttons: {
      contextButton: {
        menuItems: ['downloadPDF'],
      },
    },
  },
  credits: {
    enabled: false,
  },
};

关键配置说明 #

1. findNearestPointBy: 'xy'：默认Highcharts会按X值匹配最近点，导致同X值的点被合并触发，改为按XY坐标匹配后，每个点都能被鼠标精准触发。
2. 数据对象格式：将每个点的信息封装为对象，除了x和y外，可添加任意自定义字段，Tooltip通过this.字段名即可读取。
3. pointFormatter自定义模板：完全控制Tooltip的显示内容，可根据需求调整HTML结构和展示字段。

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