ReactChartJS2 中的组条形图单击特定元素

Question

我正在使用 react-chartjs-2 构建分组条形图。我的案例是在图上添加点击事件，并识别对应的点击元素。

考虑以下示例：如果我点击日期 15-07-2020 的绿色条，我应该能够识别用户点击了点击日期的绿色条。

但在目前的情况下，我只能获取用户刚刚单击的一组条。我在特定日期获得了所有条形图的点击（意味着日期为 15-07-2020 的橙色、绿色和红色条形图的事件）。

我的情况是识别用户点击了哪个栏，我不想要整个组。

这是我的组件的样子

<Bar
  data={barData}
  height={275}
  onElementsClick={(elem) => {
    data = barData.datasets[elem[0]._datasetIndex].data;
    //Cases will be (data[elem[0]._index]);

    data = barData.datasets[elem[1]._datasetIndex].data;
    //Recovered will be (data[elem[1]._index]);

    data = barData.datasets[elem[2]._datasetIndex].data;
    //Deaths will be (data[elem[2]._index]);
  }}
/>;

而变量barData如下：

const barData = {
  labels: [
    "04-07-2020",
    "05-07-2020",
    "06-07-2020",
    "07-07-2020",
    "08-07-2020",
    "09-07-2020",
    "10-07-2020",
  ],

  datasets: [
    {
      label: "Cases",
      borderWidth: 1,
      backgroundColor: "#ffc299",
      borderColor: "#cc5200",
      hoverBackgroundColor: "#ed873e",
      hoverBorderColor: "#e35f00",
      data: [673165, 697413, 719664, 742417, 767296, 793802, 820916],
    },
    {
      label: "Recovered",
      borderWidth: 1,
      backgroundColor: "#b3ffb3",
      borderColor: "#00ff00",
      hoverBackgroundColor: "#55cf72",
      hoverBorderColor: "#2c9c46",
      data: [409083, 424433, 439934, 456831, 476378, 495513, 515386],
    },
    {
      label: "Deaths",
      borderWidth: 1,
      backgroundColor: "#de8078",
      borderColor: "#fa6457",
      hoverBackgroundColor: "#d73627",
      hoverBorderColor: "#ff4636",
      data: [19268, 19693, 20159, 20642, 21129, 21604, 22123],
    },
  ],
};

如果 react-chartjs-2 不能处理这种情况，有人可以推荐任何其他图表库来完成吗？

非常感谢任何帮助。

Answer 1

您可以在图表选项中定义一个 onClick 函数，而不是使用 onElementsClick 函数。

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

请查看您修改后的代码 StackBlitz。

ReactChartJS2 中的组条形图单击特定元素

Group bar chart in ReactChartJS2 click particular element

javascript

bar-chart

reactjs

chart.js

react-chartjs