我无法在 meern stack 中的 React google 图表中添加动态数据

Question

我无法在此图表中动态添加我的数据。 看起来我正在尝试使用 Chart.js 和 React 创建条形图。我的代码看起来大部分是正确的，但它缺少一些动态数据更新的交互性。

import React from 'react';
import {
 Chart as ChartJS,
 CategoryScale,
 LinearScale,
 BarElement,
 Title,
  Tooltip,
 Legend
  } from "chart.js";

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

   ChartJS.register(
   CategoryScale,
    LinearScale,
     BarElement,
    Title,
    Tooltip,
   Legend );

   const BarChart = ( { CompanyData } ) => {

    const filteredData = new Set();
    const BarData = {};


     CompanyData.forEach( e => {

      filteredData.add( e.relevance );
     } );

       CompanyData.forEach( ( company ) => {
     const location = company.region === '' ? 'city' : 'country';

     if ( !BarData[ company[ location ] ] ) {
         BarData[ company[ location ] ] = 1;
     } else {
     BarData[ company[ location ] ] += 1;
      }
    } );

    const mainData = {
    labels: Object.keys( BarData ),
    datasets: [
  {
    label: 'Country wise City',
    data: Object.values( BarData ),
      backgroundColor: [ '#A0E4CB', '#C6EBC5', '#9ED5C5' ],
     },
    ],
    };
     return (
     <Bar data={ mainData } />
    );
 };
 export default BarChart;

我添加了一个 useState 挂钩来管理图表数据作为组件状态。 每当 CompanyData 属性发生变化时，我都会使用 useEffect 挂钩来更新图表数据。 updateChartData 函数根据提供的数据计算新的图表数据，并使用 setChartData 进行设置。

Answer 1

您可以尝试这段代码，在这段代码中我做了一些更改，例如删除了未使用的filteredData并更新了updateChartData函数以直接使用CompanyData道具来计算BarData。 useEffect 挂钩现在监视 CompanyData 属性中的更改并相应地触发更新。

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

const BarChart = ({ CompanyData }) => {
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    const updateChartData = () => {
      const BarData = {};

      CompanyData.forEach((company) => {
        const location = company.region === '' ? 'city' : 'country';

        if (!BarData[company[location]]) {
          BarData[company[location]] = 1;
        } else {
          BarData[company[location]] += 1;
        }
      });

      const newChartData = {
        labels: Object.keys(BarData),
        datasets: [
          {
            label: 'Country wise City',
            data: Object.values(BarData),
            backgroundColor: ['#A0E4CB', '#C6EBC5', '#9ED5C5'],
          },
        ],
      };

      setChartData(newChartData);
    };

    updateChartData();
  }, [CompanyData]);

  return <Bar data={chartData} />;
};

export default BarChart;