React中如何获取Chart.js散点图的真实数据点坐标？

解决这个问题的核心是通过点击事件返回的索引，直接从图表的原始数据集中提取真实坐标，而非使用返回元素里的画布绘制坐标。具体实现如下：

• 从点击事件结果中获取点击点对应的数据集索引（datasetIndex）和数据点索引（index）
• 通过图表实例的原始数据，取出对应位置的真实x、y值

修改你的点击回调函数：

function scatter_point_selector(event) {
  // 获取图表实例
  const chart = scatter_ref.current;
  // 获取点击对应的元素信息
  const elements = getElementAtEvent(chart, event);
  
  if (elements.length > 0) {
    const { datasetIndex, index } = elements[0];
    // 从原始数据集中提取真实坐标
    const realDataPoint = chart.data.datasets[datasetIndex].data[index];
    const realX = realDataPoint.x;
    const realY = realDataPoint.y;
    
    console.log('真实坐标：', { x: realX, y: realY });
  }
}

说明 #

你之前在控制台看到的x、y是图表在画布上绘制时的像素坐标（或经过坐标系转换后的绘制坐标），并非你传入的原始数据数值。通过上述方法直接从图表绑定的data中提取对应索引的点，就能拿到真实的坐标值。

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