React Chart JS 2: получить данные, щелкнув диаграмму

Question

Я нашел много других вопросов о StackOverflow, а также о GitHub, но ни один из них у меня не помог ...

У меня есть график, построенный с использованием Chart JS. Когда я нажимаю на любую из полос (оранжевую, зеленую или красную), я хочу получить соответствующее значение. Есть ли способ добиться этого? Я использую пакет npm - это response-chart js -2. В нем есть 2 реквизита, которые, как я нашел, могут быть полезны, но я не знаю, как их использовать в этом случае. Это getElementsAtEvent и onElementsClick . Эти реквизиты при использовании дают массу данных, кроме значения панели, на которую я только что нажал.

Вот как я импортирую компонент

import { Bar } from "react-chartjs-2";

Это как я использую компонент

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

А переменная 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],
    },
  ],
};

Это график

введите описание изображения здесь

Любая помощь приветствуется

Answer 1

Поскольку ваши данные структурированы определенным образом, при щелчке по полосе массив размером 3 возвращается как elem. Вы можете извлечь данные оттуда в зависимости от ваших требований.

Использование onElementsClick:

<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,
          },
        },
      ],
    },
  }}
/>;

elem заполняется выбранным элементом. Возможно, вам придется немного подправить этот код, чтобы добиться именно того, что вы ищете, в зависимости от того, что вы хотите делать с этими данными. Песочница в комментарии.

Answer 2

Вы можете определить функцию 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 .