Chart.js中鼠标交互（悬停/点击）时获取正确X轴数据值的问题

我完全理解你的困扰——明明tooltip能正常显示正确的X轴数值，自己用getValueForPixel拿到的却是数据点的索引，还要手动计算转换，确实不够优雅。其实不用这么麻烦，Chart.js本身提供了更直接的方式来获取点击位置对应的原始数据值。

解决方案：通过getElementsAtEventForMode获取实际数据点 #

你可以在onClick回调里使用Chart.js的getElementsAtEventForMode方法，直接定位到点击对应的原始数据条目，这样就能拿到真实的X、Y值，完全不需要手动计算比例。

代码示例如下：

options: {
  onClick: (e) => {
    // 获取点击位置对应的元素（使用'nearest'模式确保拿到最近的数据点）
    const elements = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
    
    if (elements.length > 0) {
      const clickedElement = elements[0];
      const datasetIndex = clickedElement.datasetIndex;
      const dataIndex = clickedElement.index;
      
      // 从原始数据集中取出对应的X、Y值
      const dataset = chart.data.datasets[datasetIndex];
      // 这里根据你的数据格式调整：如果是{x: xVal, y: yVal}的对象格式
      const realX = dataset.data[dataIndex].x;
      const realY = dataset.data[dataIndex].y;
      // 如果是[xVal, yVal]的数组格式，就改成 dataset.data[dataIndex][0] 和 dataset.data[dataIndex][1]
      
      console.log('真实X值（距离）:', realX, '真实Y值（高度）:', realY);
    }
  }
}

为什么之前的方法会返回索引？ #

你之前用chart.scales.x.getValueForPixel得到索引，大概率是因为你的X轴配置或者数据格式导致的：

• 如果你的X轴是type: 'category'（默认可能是这种，尤其是当你没有显式指定X轴类型时），那么scale会把数据点的索引当作类别标签，getValueForPixel自然会返回索引而非真实数值；
• 即使你设置了X轴为linear，如果你的数据没有显式指定x字段（比如只用数组顺序来隐含X值），scale也可能会用索引来计算位置，导致返回的是索引值。

而tooltip之所以能显示正确值，是因为它直接读取了你的原始数据集里的数值，没有经过scale的索引转换。

额外建议：确认X轴配置 #

为了确保X轴正确解析你的数值，建议显式设置X轴类型为linear：

options: {
  scales: {
    x: {
      type: 'linear', // 明确指定为线性数值轴
      title: {
        display: true,
        text: '距离'
      }
    }
  }
}

这样搭配上面的getElementsAtEventForMode方法，就能稳定获取到正确的X轴数值了。

备注：内容来源于stack exchange，提问作者quilkin