时间戳

首页 > 解决方案 > ReactChartJS2中的组条形图单击特定元素

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

问题描述

我正在使用react-chartjs-2构建分组条形图。我的情况是在图表上添加一个点击事件并识别相应的点击元素。

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

但在目前的情况下，我只能获得用户刚刚单击的栏组。我正在点击特定日期的所有条形（表示日期为 2020 年 7 月 15 日的橙色、绿色和红色条的事件）。

我的情况是确定用户单击了哪个栏，我不希望整个组。

这就是我的组件的样子

<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 不处理这种情况，任何人都可以建议我可以完成此操作的任何其他图表库吗？

非常感谢任何帮助。

在此处输入图像描述

标签： javascriptreactjschart.jsbar-chartreact-chartjs

解决方案

您可以在图表选项中onElementsClick定义一个函数，而不是使用函数。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);
}

请在下面的StackBlitz中查看您修改后的代码。

推荐阅读