在 React 中使用

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

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

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} />;
}

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。