在图表上单击鼠标获取(X，Y)点

Question

我使用react Chartjs的散点图为一组X，Y点绘制折线图。当用户右键单击图表上的任何位置时，我试图通过将以下函数传递给onClick来获得X点和Y点。

options={
...
onClick: function(event) {
let activeElement = Ref.current.chartInstance.getElementAtEvent(
event
);
let res =
Ref.current.chartInstance.data.datasets[
activeElement[0]._datasetIndex
].data[activeElement[0]._index];

}
}

但只有当我单击现有点上的绘制线时，这才有效，而不是当我单击图表中的任何位置时。如果我点击行以外的任何地方，返回的activeElement将是空列表。

无论我在图表区域中单击什么位置，我都如何获得X和Y？

Answer 1

onClick: (e) => {
const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
// replace .x. and .y. with the id of your axes below
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
},