reactjs - 在图表上单击鼠标获取（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？

标签： reactjschart.jsreact-chartjs

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);
},