Блог

Главная - Вопросы по программированию - Chart.js — Где я могу найти, какие компоненты должны быть зарегистрированы?

Chart.js — Где я могу найти, какие компоненты должны быть зарегистрированы?

#chart.js #chart.js3

#chart.js #диаграмма.js3

Вопрос:

Я новичок в Chart.js , видел документ v3:

Chart.js 3 можно изменять по дереву, поэтому необходимо импортировать и зарегистрировать контроллеры, элементы, шкалы и плагины, которые вы собираетесь использовать.

Мне интересно, где я могу найти эти вещи для регистрации, например, что нужно зарегистрировать, чтобы этот пример работал?

Ответ №1:

Вы получите сообщение об ошибке в своей консоли, если используете что-то, что не импортировано. Если вы хотите быть уверены, что у вас просто есть все, и отказаться от возможности встряхивания дерева, вы можете использовать этот импорт и зарегистрировать:

 import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

Или в одной строке:

 import Chart from 'chart.js/auto'

Чтобы пример работал, необходимо импортировать и зарегистрировать следующие элементы:

  • barController
  • barElement
  • categoryScale
  • Tooltip
  • Legend

Вообще говоря, для диаграммы вам нужен ее контроллер, поэтому lineController для линейной диаграммы, pieController для круговой диаграммы и т. Д. Вам нужен элемент so a lineElement и pointElement для линейной или радиолокационной диаграммы, arcElement для круговой, круговой или полярной диаграммы, а barElement также для столбчатой диаграммы. И затем вам нужно импортировать поставляемые плагины для заголовка, заполнителя (для диаграмм областей), легенды и всплывающей подсказки.

Комментарии:

1. Я получил ошибки для контроллеров и элементов Line / Scale, однако только после этого комментария я понял, что мне нужно импортировать заголовок, легенду и всплывающую подсказку, и именно поэтому они у меня не работали.

Ответ №2:

Может быть, немного поздно, но если вы используете npm, вы можете зарегистрировать все из chart.js использование

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

Или напрямую:

 import Chart from 'chart.js/auto';

Кроме того, здесь вы можете увидеть все, что можно импортировать для конкретной диаграммы, и мой ответ выше:
https://www.chartjs.org/docs/master/getting-started/integration.html#bundlers-webpack-rollup-etc

Ответ №3:

У меня это сработало.

 import { Chart } from "chart.js";
import * as Chartjs from "chart.js";

const controllers = Object.values(Chartjs).filter(
  (chart) => chart.id !== undefined
);

Chart.register(...controllers);
Метки: ,