Highcharts Spline图表悬停时Tooltip显示错误数据问题

在React应用中使用Highcharts创建的Spline图表出现异常：鼠标悬停在某一数据点上时，Tooltip有时会显示其他数据点的信息，而非预期的当前点。例如截图显示，悬停第一个数据点时，Tooltip却展示了第四个数据点的内容。当前图表配置基于Highcharts官方示例，具体代码如下：

{
    chart: {
      type: 'spline',
      inverted: true
    },
    title: {
      text: 'Atmosphere Temperature by Altitude',
      align: 'left'
    },
    subtitle: {
      text: 'According to the Standard Atmosphere Model',
      align: 'left'
    },
    xAxis: {
      reversed: false,
      title: {
        enabled: true,
        text: 'Altitude'
      },
      labels: {
        format: '{value} km'
      },
      accessibility: {
        rangeDescription: 'Range: 0 to 80 km.'
      },
      maxPadding: 0.05,
      showLastLabel: true
    },
    yAxis: {
      title: {
        text: 'Temperature'
      },
      labels: {
        format: '{value}°'
      },
      accessibility: {
        rangeDescription: 'Range: -90°C to 20°C.'
      },
      lineWidth: 2
    },
    legend: {
      enabled: false
    },
    tooltip: {
      headerFormat: '<b>{series.name}</b><br/>',
      pointFormat: '{point.x} km: {point.y}°C',
    },
    plotOptions: {
      spline: {
        marker: {
          enable: false
        }
      }
    },
    series: [{
      name: 'Temperature',
      stickyTracking: false,
      findNearestPointBy: 'xy',
      data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
      [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]

    }]
  }

问题原因与修复方案 #

• 核心原因：配置中同时启用*stickyTracking: false*和*findNearestPointBy: 'xy'*，再加上图表*inverted: true*的特性，导致Highcharts在判断最近数据点时出现逻辑冲突。图表反转后坐标轴的xy映射关系发生变化，findNearestPointBy: 'xy'的计算逻辑未适配反转后的坐标系，从而匹配到错误的点。

• 修复步骤：

  1. 移除*findNearestPointBy: 'xy'*配置，让Highcharts使用默认的'x'规则匹配数据点，这更适配当前单系列、按x轴线性分布的场景。
  2. 若需要关闭轨迹吸附功能，可保留*stickyTracking: false*，否则也可移除该配置。

修改后的series配置片段：

series: [{
  name: 'Temperature',
  stickyTracking: false,
  // 移除findNearestPointBy配置
  data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
  [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]

• 额外说明：如果业务场景必须使用findNearestPointBy，可尝试设置为'y'（因图表反转后原y轴变为水平方向），但对于当前线性分布的单系列图表，默认的'x'规则是最稳妥的选择。

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