Javascript React ChartJS 2：单击图表获取数据

我在StackOverflow和GitHub上发现了许多其他问题，但没有一个对我有用

我用ChartJS构建了一个图表。当我点击任何一个条（橙色、绿色或红色）时，我想得到相应的值。有没有办法做到这一点？ 我使用的npm包是react-chartjs-2。 它有两个道具，我发现可能会有帮助，但不知道如何在这种情况下使用它。它们是getElementsAtEvent和OneElementsClick。当使用这些道具时，除了我刚才点击的那个条的值之外，它提供了大量的数据

这就是我导入组件的方式

<Bar
  data={barData}
  height={275}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;

从“react-chartjs-2”导入{Bar}

这就是我使用组件的方式

<Bar
  data={barData}
  height={275}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;

这是图表


非常感谢您的帮助
，因为您的数据是以某种方式构造的，当单击一个条时，大小为3的数组将返回为
元素
。您可以根据需要从中提取数据

使用
onelements单击
：

<Bar
  data={barData}
  height={275}
  onElementsClick={elem => {
    var data = barData.datasets[elem[0]._datasetIndex].data;
    console.log("Cases", data[elem[0]._index]);

    data = barData.datasets[elem[1]._datasetIndex].data;
    console.log("Recovered", data[elem[1]._index]);

    data = barData.datasets[elem[2]._datasetIndex].data;
    console.log("Deaths", data[elem[2]._index]);
  }}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;

{
var data=barData.datasets[elem[0].\u datasetIndex].data；
日志（“案例”，数据[elem[0]。_index]）；
data=barData.datasets[elem[1].\u datasetIndex].data；
日志（“已恢复”，数据[elem[1]。_index]）；
data=barData.datasets[elem[2].\u datasetIndex].data；
日志（“死亡”，数据[elem[2]。_索引]）；
}}
选择权={{
MaintaintAspectRatio:false，
比例：{
雅克斯：[
{
滴答声：{
贝吉纳泽罗：是的，
},
},
],
},
}}
/>;

elem
由单击的元素填充。您可能需要对这段代码进行一些调整，以根据您想要对该数据执行的操作来准确实现您想要的内容。注释中的沙盒。
由于您的数据是以某种方式构造的，因此当单击一个条时，大小为3的数组将作为
元素返回。您可以根据需要从中提取数据

使用
onelements单击
：

<Bar
  data={barData}
  height={275}
  onElementsClick={elem => {
    var data = barData.datasets[elem[0]._datasetIndex].data;
    console.log("Cases", data[elem[0]._index]);

    data = barData.datasets[elem[1]._datasetIndex].data;
    console.log("Recovered", data[elem[1]._index]);

    data = barData.datasets[elem[2]._datasetIndex].data;
    console.log("Deaths", data[elem[2]._index]);
  }}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;

{
var data=barData.datasets[elem[0].\u datasetIndex].data；
日志（“案例”，数据[elem[0]。_index]）；
data=barData.datasets[elem[1].\u datasetIndex].data；
日志（“已恢复”，数据[elem[1]。_index]）；
data=barData.datasets[elem[2].\u datasetIndex].data；
日志（“死亡”，数据[elem[2]。_索引]）；
}}
选择权={{
MaintaintAspectRatio:false，
比例：{
雅克斯：[
{
滴答声：{
贝吉纳泽罗：是的，
},
},
],
},
}}
/>;

elem
由单击的元素填充。您可能需要对这段代码进行一些调整，以根据您想要对该数据执行的操作来准确实现您想要的内容。注释中的沙盒。
您可以在图表选项中定义一个
onClick
函数

onClick: (event, elements) => {
  const chart = elements[0]._chart;
  const element = chart.getElementAtEvent(event)[0];
  const dataset = chart.data.datasets[element._datasetIndex];
  const xLabel = chart.data.labels[element._index];
  const value = dataset.data[element._index];
  console.log(dataset.label + " at " + xLabel + ": " + value);
}

请查看以下修改后的代码。
您可以在图表选项中定义一个
onClick
函数

onClick: (event, elements) => {
  const chart = elements[0]._chart;
  const element = chart.getElementAtEvent(event)[0];
  const dataset = chart.data.datasets[element._datasetIndex];
  const xLabel = chart.data.labels[element._index];
  const value = dataset.data[element._index];
  console.log(dataset.label + " at " + xLabel + ": " + value);
}

请查看以下修改后的代码。
我在问题中已经提到，如果我在onElementsClick中控制台elem，我会得到很多数据。我还提到我没有得到我要找的数据。对不起，这不能解决我的问题，这不是我想要的。。。请阅读问题。有人明确提到onElementsClick不为我工作…@RahulRavi我费了好大劲才修好你的代码。也是沙箱。我不是粗鲁的兄弟。对不起，如果我是粗鲁的，我会因为这件事感到沮丧。谢谢你，它很有魅力，我接受这个答案。谢谢你的帮助。你救了我一天。。。我已经找了两天了。“Parths我看到您使用了
onElementsClick
，您的评论解决了我遇到的一个问题。我在文档中搜索了此
onElementsClick
，但找不到它。你在哪里找到这些信息的？谢谢。我在问题中已经提到，如果我在onElementsClick中控制台elem，我会得到很多数据。我还提到我没有得到我想要的数据。对不起，这不能解决我的问题，这不是我想要的。。。请阅读问题。有人明确提到onElementsClick不为我工作…@RahulRavi我费了好大劲才修好你的代码。也是沙箱。我不是粗鲁的兄弟。对不起，如果我是粗鲁的，我会因为这件事感到沮丧。谢谢你，它很有魅力，我接受这个答案。谢谢你的帮助。你救了我一天。。。我已经找了两天了。“Parths我看到您使用了
onElementsClick
，您的评论解决了我遇到的一个问题。我在文档中搜索了此
onElementsClick
，但找不到它。你在哪里找到这些信息的？谢谢。感谢您在
barData
中构建数据的方式；单击整个元素，而不仅仅是一个特定的条。它为日期返回一个长度为3的数组；单击整个元素，而不仅仅是一个特定的条。它返回日期的长度为3的数组。