切换图表类型后Chart.js实例ctx与canvas为null的问题解决

数据老陈

2026-8-14

问题原因

切换图表类型时，原图表组件（如<Doughnut>）会被React卸载，对应的Chart.js实例会被销毁，此时chartRef.current指向的是已销毁的实例，其ctx和canvas属性自然变为null。
你在组件顶层直接将chart赋值为chartRef.current，这个值只会在组件首次渲染时获取一次。当切换回饼图时，新的Chart实例被创建，但chart变量仍然指向旧的销毁实例，导致点击函数调用失效。

解决方法

方法1：在点击函数中实时获取最新的Chart实例

不要在组件顶层提前赋值chart，而是在legendClickHandler里直接使用chartRef.current，确保每次点击都拿到当前活跃的Chart实例：

// 移除顶层的const chart = chartRef.current;
const legendClickHandler = (index) => {
  const chart = chartRef.current; // 实时获取最新实例
  if (!chart) return; // 避免实例未加载时出错
  const { type } = chart.config;
  if (type === 'pie' || type === 'doughnut') {
    chart.toggleDataVisibility(index);
    chart.update();
  }
};

方法2：使用useEffect监听图表类型变化（可选）

如果需要在其他逻辑中也访问最新实例，可以配合useEffect更新状态变量：

import { useRef, useState, useEffect } from 'react';

const Graph = (props) => {
  const [chartType, setChartType] = useState({
    id: 'c1',
    name: 'Pie Chart',
    value: 'pie',
  });
  const chartRef = useRef(null);
  const [currentChart, setCurrentChart] = useState(null);

  useEffect(() => {
    setCurrentChart(chartRef.current);
  }, [chartType]); // 图表类型切换后更新当前实例

  const legendClickHandler = (index) => {
    if (!currentChart) return;
    const { type } = currentChart.config;
    if (type === 'pie' || type === 'doughnut') {
      currentChart.toggleDataVisibility(index);
      currentChart.update();
    }
  };

  // 其余渲染代码保持不变
};