小编Rah*_*l R的帖子

React ChartJS 2:点击图表获取数据

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

我有一个使用 ChartJS 构建的图表。当我单击任何条形(橙色、绿色或红色)时,我想获得相应的值。有什么办法可以实现这一点吗?我使用的 npm 包是react-chartjs-2。我发现它有 2 个道具可能会有帮助,但不知道在这种情况下如何使用它。它们是getElementsAtEventonElementsClick。这些道具在使用时会提供大量数据,除了我刚刚单击的栏的值。

这就是我导入组件的方式

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

这就是我使用该组件的方式

<Bar
  data={barData}
  height={275}
  options={{
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }}
/>;
Run Code Online (Sandbox Code Playgroud)

变量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, …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs chart.js react-chartjs

5
推荐指数
1
解决办法
7343
查看次数

标签 统计

chart.js ×1

javascript ×1

react-chartjs ×1

reactjs ×1