在TSX中使用Chart.js创建的图表无法显示，请求排查

1. 检查依赖是否完整安装 #

• 新手常漏装适配React的Chart.js封装库或类型声明，执行以下命令补全依赖：

  npm install chart.js react-chartjs-2
  npm install @types/chart.js --save-dev
  

  （用yarn的话把npm install换成yarn add）

2. 组件代码的常见错误修正 #

必须注册Chart.js核心模块 #

Chart.js v3+需要手动注册用到的组件，不然会因缺失模块报错。正确的TemperatureChart组件写法示例：

import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend } from 'chart.js';

// 注册折线图必需的模块
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  Legend
);

interface TemperatureChartProps {
  data: {
    labels: string[];
    datasets: Array<{
      label: string;
      data: number[];
      borderColor: string;
      backgroundColor: string;
    }>;
  };
}

export const TemperatureChart = ({ data }: TemperatureChartProps) => {
  return <Line data={data} />;
};

3. App.tsx调用时的数据格式校验 #

确保传入的数据完全符合Chart.js要求，示例代码：

import { TemperatureChart } from './TemperatureChart';

function App() {
  // 测试数据格式必须正确：labels是横轴标签数组，datasets包含数据和样式
  const testData = {
    labels: ['周一', '周二', '周三', '周四', '周五'],
    datasets: [
      {
        label: '气温(℃)',
        data: [22, 25, 23, 27, 24],
        borderColor: 'rgb(75, 192, 192)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      },
    ],
  };

  return (
    <div className="chart-container">
      <TemperatureChart data={testData} />
    </div>
  );
}

export default App;

4. CSS容器样式的关键设置 #

容器必须设置明确的宽高，否则图表会因无尺寸而不显示：

.chart-container {
  width: 80%; /* 或固定值如600px */
  height: 400px; /* 必须设置高度，不能只设宽度 */
  margin: 0 auto;
}

5. 控制台错误针对性排查 #

• 若提示Chart is not defined：检查是否正确导入Chart.js，或漏注册核心模块
• 若提示Cannot read properties of undefined：检查传入的data是否为undefined，或datasets数组为空
• 若提示Canvas is already in use：如果是手动操作canvas（未用react-chartjs-2），需在useEffect的清理函数中销毁旧实例：

  useEffect(() => {
    const chart = new Chart(canvasRef.current, { /* 配置项 */ });
    return () => chart.destroy(); // 组件卸载时销毁实例
  }, [data]);
  

内容的提问来源于stack exchange，提问作者axandrei1234