react-chart-2 <"Line" 不是注册控制器。>

Question

目前，我正在编写一个代码，当通过 React 接收到输入时，它会自动将输入值绘制到图表中。我正在尝试使用 usestate 添加保存的图表进行测试，但我无法继续处理错误 <"Line" is not a registered controller.>.

有什么方法可以解决这个错误吗？

代码如下：

import {CreatChart} from './WidgetCRUD'
import Chart from 'chart.js/auto'
import {Radar,Line,Pie,Doughnut,PolarArea, Bar} from 'react-chartjs-2' 

const options = 
{
  responsive: true, 
  scales: 
  {
    yAxes: 
    [
      {
        ticks: 
        {
          beginAtZero: true,
        },
      },
    ],
  },
}

const data = 
{
  labels: ['1', '2', '3', '4', '5', '6', '7' , '8', '9','10'],
  datasets: [
    {
      type: 'line',
      label: 'Dataset 1',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2,
      data: [30, 9, 24, 50,-20,20, 17, 45, 49],
    }
  ],
}


const main = () =>
{
    const [createChart, setCreateChart] = useState([])
    setCreateChart(<Line data = {data} options={options} style={{ position: "relative"}}/>)
    return (
       <div>{createChart}</div>
    )
}

Answer 1

这是我的代码，因此您需要根据自己的代码进行调整，首先您需要从 chart.js 导入所需的所有内容，具体取决于您需要的图表，我使用的是折线图

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

然后你需要注册元素：

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

有关详细信息，请查看以下链接： Link 1 Link 2

react-chart-2 <"Line" 不是注册控制器。>

react-chart-2 <"Line" is not a registered controller.>

reactjs

react-chartjs