Доступ к экземпляру графика из JavaScript

В Chart.js каждый созданный график представляет собой полноценный объект-экземпляр класса Chart. Именно этот объект содержит все данные, настройки, внутреннее состояние и методы управления отрисовкой.

Базовый способ получения экземпляра — сохранение результата при создании графика:

const ctx = document.getElementById('myChart');

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Значения',
      data: [10, 20, 30]
    }]
  }
});

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

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

Глобальный доступ через Chart.getChart

Chart.js поддерживает централизованный реестр всех активных графиков. Это позволяет получить экземпляр по canvas-элементу или его идентификатору.

const chart = Chart.getChart('myChart');

Также допустимо передавать сам DOM-элемент:

const canvas = document.getElementById('myChart');
const chart = Chart.getChart(canvas);

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

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

Структура экземпляра Chart

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

  • data — набор данных и меток
  • options — конфигурация поведения и внешнего вида
  • config — исходная конфигурация, переданная при создании
  • canvas — ссылка на canvas-элемент
  • ctx — 2D контекст отрисовки
  • scales — оси координат (для категориальных и числовых графиков)

Пример доступа к данным:

chart.data.datasets[0].data.push(40);

Изменение данных само по себе не приводит к обновлению визуализации — требуется явный вызов метода обновления.

Обновление графика через экземпляр

Метод update() синхронизирует внутреннее состояние с визуальным отображением.

chart.data.labels.push('D');
chart.data.datasets[0].data.push(40);

chart.update();

Возможен параметр режима обновления:

chart.update('active');

Основные режимы:

  • default — стандартная перерисовка
  • none — без анимации
  • active — с учётом активных элементов (например, hover)

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

Доступ к данным и их модификация

Через экземпляр можно напрямую управлять структурой данных:

chart.data.datasets[0].data[2] = 100;
chart.data.labels[2] = 'Изменено';
chart.update();

Добавление нового набора данных:

chart.data.datasets.push({
  label: 'Новый набор',
  data: [5, 15, 25]
});

chart.update();

Удаление данных:

chart.data.datasets.splice(0, 1);
chart.update();

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

Доступ к конфигурации и её изменение

Экземпляр содержит текущую конфигурацию в options, которую можно изменять динамически:

chart.options.plugins.legend.display = false;
chart.update();

Изменения могут касаться:

  • отображения легенды
  • настроек осей
  • анимации
  • взаимодействия с мышью
  • стилей элементов

Важно учитывать, что изменение конфигурации без update() не влияет на отображение.

Управление жизненным циклом экземпляра

Экземпляр графика существует до тех пор, пока явно не уничтожен:

chart.destroy();

После вызова:

  • canvas очищается
  • события удаляются
  • экземпляр исключается из реестра Chart.js
  • повторное использование переменной становится недопустимым без пересоздания

Проверка существования через реестр:

const existing = Chart.getChart('myChart');

Работа с несколькими графиками

При наличии нескольких canvas каждый экземпляр управляется независимо:

const chart1 = new Chart(ctx1, config1);
const chart2 = new Chart(ctx2, config2);

Доступ через реестр позволяет выбирать нужный экземпляр по идентификатору:

const chartA = Chart.getChart('chartA');
const chartB = Chart.getChart('chartB');

Каждый экземпляр хранит собственное состояние, включая данные, масштабирование и интерактивность.

Синхронизация данных между экземплярами

Иногда требуется связать несколько графиков:

chart2.data = chart1.data;
chart2.update();

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

chart2.data = structuredClone(chart1.data);
chart2.update();

Доступ к внутренним компонентам

Экземпляр предоставляет доступ к внутренним модулям:

  • осям (scales)
  • элементам графика (elements)
  • плагинам (plugins)
  • анимациям (animation)

Пример получения масштаба:

const xScale = chart.scales.x;
console.log(xScale.min, xScale.max);

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

Практика безопасного доступа к экземпляру

При работе с динамически создаваемыми графиками часто возникает необходимость проверки существования экземпляра:

const chart = Chart.getChart('myChart');

if (chart) {
  chart.update();
}

Без такой проверки возможны ошибки при обращении к несуществующему объекту.

Типичные сценарии использования экземпляра

  • динамическое обновление данных в реальном времени
  • переключение наборов данных без пересоздания графика
  • синхронизация нескольких визуализаций
  • управление анимациями и взаимодействием
  • интеграция с внешними API и потоками данных
Оглавление