Регистрация кастомных компонентов

Современная архитектура Chart.js основана на модульной системе, в которой практически все функциональные части графика существуют как отдельные регистрируемые сущности. Это позволяет уменьшать итоговый размер бандла за счёт подключения только необходимых компонентов и одновременно даёт возможность расширять библиотеку собственными элементами.

Регистрация выполняется через глобальный реестр, доступный в объекте Chart. Любой компонент — элемент, контроллер, шкала или плагин — должен быть явно зарегистрирован до использования.

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

Chart.register(...registerables);

Константа registerables содержит полный набор стандартных компонентов библиотеки. Такой способ удобен для быстрого старта, но в реальных проектах чаще используется точечная регистрация.

Регистрация элементов графика (Elements)

Элементы отвечают за визуальное представление отдельных частей графика. Каждый тип диаграммы использует собственный набор элементов.

Наиболее распространённые:

  • ArcElement — дуги (pie, doughnut)
  • LineElement — линии линейных графиков
  • PointElement — точки данных
  • BarElement — столбцы

Регистрация выполняется явно:

import {
  Chart,
  ArcElement,
  LineElement,
  PointElement,
  BarElement
} from 'chart.js';

Chart.register(ArcElement, LineElement, PointElement, BarElement);

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

Регистрация контроллеров (Controllers)

Контроллеры определяют поведение конкретного типа графика: как интерпретируются данные, как строятся элементы и как формируется логика отрисовки.

Примеры стандартных контроллеров:

  • BarController
  • LineController
  • PieController
  • DoughnutController

Регистрация контроллеров:

import {
  Chart,
  BarController,
  LineController,
  PieController,
  DoughnutController
} from 'chart.js';

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

Контроллер является центральным звеном между данными и визуальными элементами. Без него Chart.js не понимает, как преобразовать dataset в графическое представление.

Регистрация шкал (Scales)

Шкалы отвечают за систему координат, масштабирование и преобразование значений в пиксели.

Основные шкалы:

  • CategoryScale — категориальная ось (часто X)
  • LinearScale — линейная шкала
  • LogarithmicScale — логарифмическая шкала
  • TimeScale — временная шкала

Пример подключения:

import {
  Chart,
  CategoryScale,
  LinearScale,
  LogarithmicScale,
  TimeScale
} from 'chart.js';

Chart.register(CategoryScale, LinearScale, LogarithmicScale, TimeScale);

Шкалы являются обязательным компонентом даже для простых графиков, поскольку без них невозможно корректно вычислить координаты точек.

Регистрация плагинов (Plugins)

Плагины расширяют функциональность Chart.js, не изменяя базовую структуру графика. Они позволяют внедрять кастомную логику: аннотации, водяные знаки, обработку событий, дополнительную отрисовку.

Регистрация плагина:

const customPlugin = {
  id: 'customPlugin',
  beforeDraw(chart) {
    const { ctx, width, height } = chart;
    ctx.save();
    ctx.fillText('Текст поверх графика', width / 2, height / 2);
    ctx.restore();
  }
};

Chart.register(customPlugin);

Каждый плагин обязан иметь уникальный id, иначе возможны конфликты при регистрации нескольких расширений.

Глобальная регистрация через registerables

Chart.js предоставляет агрегированный набор всех стандартных компонентов:

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

Chart.register(...registerables);

Этот подход включает:

  • все элементы
  • все контроллеры
  • все шкалы
  • стандартные плагины

Такой вариант увеличивает размер бандла, но гарантирует отсутствие ошибок из-за нехватки зарегистрированных зависимостей.

Точечная регистрация для оптимизации бандла

В production-сборках предпочтительно подключать только используемые части библиотеки.

Пример минимальной конфигурации для линейного графика:

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale
} from 'chart.js';

Chart.register(
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale
);

Такой подход уменьшает размер итогового JavaScript и ускоряет загрузку приложения.

Создание кастомных компонентов

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

Кастомный контроллер

Кастомный контроллер наследуется от базового DatasetController и определяет собственную логику построения данных.

import { DatasetController, Chart } from 'chart.js';

class CustomController extends DatasetController {
  draw() {
    const ctx = this.chart.ctx;

    this.getMeta().data.forEach((element, index) => {
      const value = this.getDataset().data[index];

      ctx.save();
      ctx.fillStyle = 'blue';
      ctx.fillRect(element.x, element.y, value, 10);
      ctx.restore();
    });
  }
}

CustomController.id = 'customController';
CustomController.defaults = {
  dataElementType: 'point'
};

Chart.register(CustomController);

Ключевые моменты:

  • id обязателен для регистрации
  • draw() управляет рендерингом
  • доступ к данным осуществляется через this.getDataset()

Кастомный элемент

Элементы определяют, как отдельная часть данных будет визуализирована.

import { Element } from 'chart.js';

class CustomElement extends Element {
  draw(ctx) {
    const { x, y } = this.getProps(['x', 'y']);

    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, 6, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.restore();
  }
}

CustomElement.id = 'customElement';

Chart.register(CustomElement);

Такие элементы часто используются в специализированных графиках, где стандартных форм недостаточно.

Кастомный плагин с жизненным циклом

Плагины могут использовать хуки жизненного цикла графика:

  • beforeInit
  • afterDatasetsDraw
  • beforeUpdate
  • afterRender

Пример:

const lifecyclePlugin = {
  id: 'lifecyclePlugin',

  beforeDatasetsDraw(chart) {
    const ctx = chart.ctx;
    ctx.save();
    ctx.font = '12px sans-serif';
    ctx.fillText('Перед отрисовкой датасетов', 10, 20);
    ctx.restore();
  },

  afterRender(chart) {
    const ctx = chart.ctx;
    ctx.save();
    ctx.fillText('После рендера', 10, 40);
    ctx.restore();
  }
};

Chart.register(lifecyclePlugin);

Плагины получают полный доступ к контексту графика, но не должны напрямую изменять внутреннее состояние без необходимости.

Порядок регистрации и зависимости компонентов

Регистрация компонентов должна учитывать зависимости между ними. Например:

  • контроллер зависит от шкал и элементов
  • элемент не работает без соответствующего контроллера
  • плагин может зависеть от уже зарегистрированных сущностей

Типичная ошибка — регистрация плагина до подключения базовых шкал или контроллеров, что приводит к отсутствию данных в lifecycle-хуках.

Повторная регистрация и конфликты

Повторная регистрация компонента с одинаковым id приводит к его перезаписи. Это может использоваться для переопределения поведения стандартных компонентов, но требует осторожности.

Chart.register({
  id: 'tooltip',
  beforeInit() {
    console.log('Переопределённый tooltip');
  }
});

Такая практика применяется при глубокой кастомизации, но ухудшает предсказуемость поведения библиотеки.

Регистрация в среде модульных сборщиков

При использовании bundler’ов (Vite, Webpack, Rollup) регистрация должна выполняться до создания экземпляра графика.

import { Chart, LineController, LineElement, CategoryScale, LinearScale } from 'chart.js';

Chart.register(LineController, LineElement, CategoryScale, LinearScale);

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{ data: [1, 2, 3] }]
  }
});

Отсутствие предварительной регистрации приводит к runtime-ошибкам или пустому рендеру графика.

Структурная модель реестра компонентов

Внутренний реестр Chart.js представляет собой набор карт:

  • elements
  • controllers
  • scales
  • plugins

Каждая категория хранит зарегистрированные сущности по их id. При инициализации графика происходит разрешение зависимостей и сбор финального графа рендеринга.

Эта архитектура обеспечивает:

  • динамическую загрузку компонентов
  • tree-shaking
  • расширяемость без изменения ядра библиотеки
Оглавление