创建一个for循环以使用Charts Reactjs在render中显示来自API的数据对象

npm install react-chartjs-2 chart.js

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

const ChartComponent = () => {
  const [chartData, setChartData] = useState({});
  
  // 在组件挂载时获取API数据
  useEffect(() => {
    fetchData();
  }, []);
  
  // 从API获取数据的函数
  const fetchData = async () => {
    try {
      const response = await fetch('API的URL');
      const data = await response.json();
      
      // 处理数据并更新状态变量
      const chartData = {
        labels: data.labels,
        datasets: [
          {
            label: '数据对象',
            data: data.values,
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
          },
        ],
      };
      setChartData(chartData);
    } catch (error) {
      console.log(error);
    }
  };
  
  return (
    <div>
      <Bar data={chartData} options={/* 图表配置项 */} />
    </div>
  );
};

export default ChartComponent;