typescript - 在 reactjs 中使用 chartjs 和 react-chartjs-2 的问题

我尝试用温度数据、湿度数据和亮度数据绘制折线图。我尝试降低 chartjs 和 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.
    

请帮我这个，非常感谢

尝试更改 chartjs 和 react-chartjs-2 的版本，但不起作用

答案＃1

你遇到的所有错误都是因为没有注册这些元素，我们可以通过下面的代码来实现。

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

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

代码

他们网站上的折线图示例演示

当我实现相同功能时，无法渲染图表，我发现你在x轴上设置了linear，在我的示例中由于没有提供数据，我使用了字符串，所以在移除linear后，图表得以渲染！

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

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

export const App: FC<{ name: string }> = ({ name }) => {
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
  ];
  const chartData = {
    labels: ['test', 'test2', 'test3'],
    datasets: [
      {
        label: 'Temperature',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
      },
      {
        label: 'Humidity',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      {
        label: 'Brightness',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1,
      },
    ],
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true,
        max: 1000,
        type: 'linear',
      },
    },
  };
  const chartKey = 'line';

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

stackblitz