如何使用React状态改变Chart.js数据？

pbgvytdp 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(184)

在我的项目中，我希望在两组数据之间切换：当前周每天的总工作小时数，以及当前年每月的总工作小时数。我可以在按钮处理程序中实现Chart.js标签操作，但无法修改状态的数据属性。我缺少什么？谢谢您的帮助。

**注意：**注解代码在取消注解时会生成以下错误语句：Uncaught TypeError: nextDatasets.map is not a function

LineChart.js

const [userData, setUserData] = useState({
    labels: Object.keys(daysData),
    datasets: [
      {
        label: "Hours worked",
        data: Object.values(daysData),
        backgroundColor: "red",
        borderColor: "black",
        borderWidth: 2,
      },
    ],
  });

  const onShowWeeklyHandler = () => {
    setUserData({ labels: Object.keys(daysData) });
    // setUserData({ datasets: { data: Object.keys(daysData) } });
  };

  const onShowMonthlyHandler = () => {
    setUserData({ labels: Object.keys(monthsData) });
    // setUserData({ datasets: { data: Object.keys(monthsData) } });
  };

chart.js

来源：https://stackoverflow.com/questions/73285391/how-do-i-mutate-chart-js-data-using-react-state

1条答案

按热度按时间

agyaoht71#

您可能会遇到问题，因为您正在尝试使用useState挂接浅合并状态。React不支持此操作。有关详细信息，请参阅this answer。
如果这不能解决您的问题，您是否研究过react-chartjs-2？您可能能够通过执行以下操作来实现您想要的结果。
在父组件（包含图表的组件）中：

import { Bar } from "react-chartjs-2"; // import whatever chart type you need
...

const [userData, setUserData] = useState({
    labels: Object.keys(daysData),
    datasets: [
      {
        label: "Hours worked",
        data: Object.values(daysData),
        backgroundColor: "red",
        borderColor: "black",
        borderWidth: 2,
      },
    ],
  });

然后，您的处理程序可以是：

const onShowWeeklyHandler = () => {
    setUserData({
      ...userData,
      datasets: {
        ...userData.datasets,
        labels: Object.keys(daysData),
        data: Object.values(daysData),
      },
    });
  };

  const onShowMonthlyHandler = () => {
    setUserData({
      ...userData,
      datasets: {
        ...userData.datasets,
        labels: Object.keys(monthsData),
        data: Object.values(monthsData),
      },
    });
  };

最后道：

return <Bar data={userData.datasets} />; // adapt for whatever chart type you need

赞(0）回复(0）举报 2022-11-09

我来回答

如何使用React状态改变Chart.js数据？

1条答案

相关问题

热门标签

最新问答