错误：“类别”不是注册规模

Question

我正在尝试将 Chart.js 从

2.9.3

迁移到

3.3.0

，甚至在应用更改后（https://www.chartjs.org/docs/latest/getting-started/v3-migration.html ）我仍然收到错误：

Error: "category" is not a registered scale

.

这就是我所拥有的

Chart.register(BarController, DoughnutController, LineController, PieController);

new Chart(this.id, {
    type: 'bar',
    data,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
        title: {
            display: options.plugins.title ? true : false,
        },        
        tooltip: {
            mode: 'index',
            intersect: false
        },        
        scales: {
        x: {
            stacked: true,
            gridLines: {
            drawBorder: false,
            display: false,
            },
            ticks: {
            autoSkip: true,
            maxTicksLimit: 13,
            },
        },
        y: {
            stacked: true,
            gridLines: {
            color: '#e6e6e6',
            drawBorder: false,
            },
        }
    }
});

我可能会错过什么？

Answer 1

就像错误表明您正在使用

category scale

因此您需要像这样导入并注册它：

import {CategoryScale} from 'chart.js'; 
Chart.register(CategoryScale);

或者您可以选择不使用 treeshaking 并导入所有内容，如下所示：

import Chart from 'chart.js/auto';

对于您可能需要导入和注册的所有可用内容，请查看此处：https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc

Answer 2

如果您正在使用

react-chartjs-2

。

没有树木摇晃：

import { Chart as ChartJS } from 'chart.js/auto'
import { Chart }            from 'react-chartjs-2'

摇树：

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

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

Answer 3

与react-chartjs-2一起使用并导入所有内容；将图表更改为 Chartjs，以便从 React Chart 导入图表时不会显示错误

import { Chart as ChartJS, registerables } from 'chart.js';
import { Chart } from 'react-chartjs-2'
ChartJS.register(...registerables);

Answer 4

我正在使用折线图，更新到 next.js 版本时遇到了这个问题，下面的解决方案对我来说效果很好，在 destroy() 图表错误之前解决了这个问题

import Chart from 'chart.js/auto';

import { Line } from "react-chartjs-2";