Ошибка: «категория» не является зарегистрированной шкалой.

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).

Или вы можете не использовать treehaking и импортировать все так: 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, чтобы она не отображала ошибку при импорте диаграммы из диаграммы реагирования

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

Answer 4

В NextJS мне нужно использовать следующее, так как внутри реакции-chartjs-2 есть useEffect, поэтому все должно быть визуализировано клиентом:

      "use client";

import "chart.js/auto";

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

Answer 5

Я использую линейную диаграмму, я столкнулся с этой проблемой при обновлении до версии next.js, приведенное ниже решение отлично работает для меня, разрешил это до ошибки диаграммы destroy()

импортировать диаграмму из 'chart.js/auto'; импортировать {строку} из "react-chartjs-2";