使用React在Chart.js中显示来自Node.js的Json

import React, { useEffect, useState } from 'react';
import Chart from 'chart.js';
import axios from 'axios';

const ChartComponent = () => {
  const [jsonData, setJsonData] = useState([]);

  useEffect(() => {
    // 发送HTTP请求获取JSON数据
    axios.get('/api/data')
      .then(response => {
        setJsonData(response.data);
      })
      .catch(error => {
        console.error('Error fetching JSON data:', error);
      });
  }, []);

  useEffect(() => {
    // 初始化图表
    const ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: jsonData.map(item => item.label),
        datasets: [{
          label: 'Data',
          data: jsonData.map(item => item.value),
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }, [jsonData]);

  return (
    <div>
      <canvas id="chart" width="400" height="200"></canvas>
    </div>
  );
};

export default ChartComponent;