如何在新增数据时自动更新条形图？

npm install react-chartjs-2 chart.js

import React, { useState, useEffect } from 'react';
import { Bar } from 'react-chartjs-2';

const BarChart = () => {
  const [data, setData] = useState({
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        borderWidth: 1,
        hoverBackgroundColor: 'rgba(75,192,192,0.4)',
        hoverBorderColor: 'rgba(75,192,192,1)',
        data: [65, 59, 80, 81, 56],
      },
    ],
  });

  useEffect(() => {
    // 模拟数据更新
    const interval = setInterval(() => {
      setData(prevData => ({
        ...prevData,
        datasets: [
          {
            ...prevData.datasets[0],
            data: prevData.datasets[0].data.map(() => Math.floor(Math.random() * 100)),
          },
        ],
      }));
    }, 2000);

    return () => clearInterval(interval); // 清除定时器
  }, []);

  return (
    <div>
      <Bar data={data} />
    </div>
  );
};

export default BarChart;