在 React 中使用

在 React 中，可以通过函数组件配合 useEffect 和 useRef 钩子来使用 Chart.js，实现图表的动态渲染和生命周期管理。

下面示例是一个简单的 React 组件，展示如何初始化和销毁 Chart.js 图表。

jsx

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

export default function MyChart() {
  const chartRef = useRef(null);
  let chartInstance = null;

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    chartInstance = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['一月', '二月', '三月', '四月', '五月'],
        datasets: [{
          label: '销售额',
          data: [12, 19, 3, 5, 2],
          backgroundColor: 'rgba(75, 192, 192, 0.7)'
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { display: true }
        }
      }
    });

    return () => {
      chartInstance.destroy();
    };
  }, []);

  return <canvas ref={chartRef} width={600} height={400} />;
}

在 React 中使用 ​

在 React 中使用