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

pbgvytdp  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(164)

在我的项目中,我希望在两组数据之间切换:当前周每天的总工作小时数,以及当前年每月的总工作小时数。我可以在按钮处理程序中实现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) } });
  };
agyaoht7

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

相关问题