React中使用chart.js与react-chartjs-2绘制折线图报错求助

依赖配置 #

"dependencies": {
    "antd": "^5.13.2",
    "chart.js": "^3.9.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "^18.2.0",
  },

代码实现 #

import React from 'react'
import { Line } from 'react-chartjs-2';

const GraphElement = () => {

  const chartData = {
    labels: timeData,
    datasets: [
      {
        label: 'Temperature',
        data: temperatureData,
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
      },
      {
        label: 'Humidity',
        data: humidityData,
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      {
        label: 'Brightness',
        data: brightnessData,
        fill: false,
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1,
      },
    ],
  }

  const options = {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
      },
      y: {
          beginAtZero: true,
          max: 1000,
          type: 'linear',
      },
    },
  };


  return (
    <div className='graph--container'>
      ĐỒ THỊ 
      <Line key={chartKey} data={chartData} options={options} />
    </div>
  )
}

export default GraphElement;

报错信息 #

ERROR
"linear" is not a registered scale.

and
Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.

已尝试操作 #

• 降级chart.js和react-chartjs-2版本，问题未解决

解决方案 #

1. 修复"linear"未注册比例尺错误 #

Chart.js v3+版本需要手动注册所需组件，包括线性比例尺。修改代码导入部分，注册必要组件：

import React from 'react'
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

// 一次性注册所有Chart.js核心组件
Chart.register(...registerables);

如果想按需注册，也可以单独导入需要的组件：

import { Chart, LinearScale, CategoryScale, LineElement, PointElement, Tooltip, Legend } from 'chart.js';

Chart.register(LinearScale, CategoryScale, LineElement, PointElement, Tooltip, Legend);

注：如果timeData是时间序列数据，建议改用TimeScale并注册，同时调整x轴配置为type: 'time'

2. 修复Canvas重复使用错误 #

这个问题是因为Chart实例未被正确销毁，导致canvas被重复占用，可通过两种方式解决：

方式一：确保chartKey有效且动态更新

代码中使用了chartKey但未定义，需将其绑定到数据变化上，强制组件重新渲染：

// 假设timeData是组件内的状态变量
const [timeData, setTimeData] = React.useState([]);
// 用数据长度或时间戳作为唯一key
const chartKey = timeData.length;

方式二：手动销毁Chart实例

通过ref获取Chart实例，在组件卸载时销毁：

import React, { useRef, useEffect } from 'react'
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const GraphElement = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chartInstance = chartRef.current?.chartInstance;
    // 组件卸载时销毁实例
    return () => chartInstance?.destroy();
  }, []);

  // ...其余代码不变

  return (
    <div className='graph--container'>
      ĐỒ THỊ 
      <Line ref={chartRef} key={chartKey} data={chartData} options={options} />
    </div>
  )
}

export default GraphElement;

额外检查点 #

• 确认timeData、temperatureData等变量已在组件内正确定义或传入，避免未定义错误
• 若x轴为时间数据，需调整x轴配置为时间比例尺，并确保数据格式符合Chart.js的时间要求

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