Метод chart.update() и режимы обновления

Назначение chart.update()

Метод chart.update() является центральным механизмом перерисовки и синхронизации состояния диаграммы с изменёнными данными или конфигурацией. Любые изменения, внесённые в объект data, options, наборы данных (datasets) или отдельные элементы графика, не применяются автоматически — они вступают в силу только после явного вызова обновления.

Основная задача метода заключается в том, чтобы:

  • пересчитать внутренние структуры графика;
  • обновить масштабы осей (scales);
  • перераспределить элементы визуализации;
  • применить анимации (если включены);
  • перерисовать canvas.

Базовая сигнатура

chart.update(mode);

Параметр mode определяет поведение обновления: будет ли применена анимация, как обрабатывать изменения и какие части графика пересчитывать.

Общий жизненный цикл обновления

При вызове chart.update() происходит последовательная цепочка операций:

  1. Проверка флагов изменений (dirty flags)
  2. Обновление датасетов
  3. Пересчёт масштабов (scales)
  4. Обновление элементов (elements)
  5. Перестройка layout
  6. Рендеринг
  7. Анимация (при необходимости)

В зависимости от режима часть этапов может быть пропущена или упрощена.

Режимы обновления (update mode)

undefined или default

Если режим не указан, используется стандартное поведение, определённое в конфигурации графика:

chart.update();

Характеристики:

  • применяется анимация (если options.animation включена);
  • выполняется полный пересчёт данных;
  • обновляются все элементы графика;
  • подходит для большинства случаев изменения данных.

Режим none

chart.update('none');

Особенности режима:

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

Типичные сценарии применения:

  • потоковые данные (streaming);
  • обновление в цикле;
  • синхронизация с внешними источниками данных.

Режим resize

chart.update('resize');

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

Поведение:

  • пересчитывается layout;
  • адаптируются оси;
  • перераспределяются элементы;
  • анимации могут частично сохраняться.

Применяется при:

  • изменении размеров контейнера;
  • динамическом изменении CSS;
  • адаптивной верстке.

Режим active

chart.update('active');

Режим активного обновления фокусируется на взаимодействии пользователя с графиком.

Характеристики:

  • обновляются состояния hover и active элементов;
  • пересчитываются интерактивные элементы;
  • минимизируется перерасчёт данных.

Используется при:

  • пользовательских событиях (hover, click);
  • обновлении tooltip;
  • синхронизации интерактивных состояний.

Режим reset

chart.update('reset');

Режим сбрасывает анимационное состояние элементов и запускает их заново.

Поведение:

  • сброс прогресса анимации;
  • повторный запуск transition;
  • восстановление начальных состояний элементов.

Применяется:

  • при полной перерисовке данных;
  • при смене набора datasets;
  • при визуальном «перезапуске» графика.

Режимы скрытия и отображения элементов

В некоторых конфигурациях Chart.js поддерживает поведенческие режимы, связанные с появлением и исчезновением элементов:

show

  • используется при добавлении элементов;
  • активирует анимацию появления;
  • строит элементы с нуля.

hide

  • используется при удалении datasets;
  • запускает анимацию исчезновения;
  • освобождает внутренние структуры после завершения анимации.

Влияние update() на datasets

Изменение данных без вызова update() не приводит к визуальному обновлению.

Пример:

chart.data.datasets[0].data.push(42);
chart.update();

При вызове обновления происходит:

  • перерасчёт линейных или категориальных шкал;
  • обновление минимальных и максимальных значений;
  • перераспределение точек на графике.

Частичное обновление данных

В сложных сценариях можно изменять только часть структуры:

chart.data.labels.push('New label');
chart.data.datasets[1].data[3] = 100;
chart.update('none');

Такой подход снижает нагрузку при частых обновлениях.

Влияние update() на options

Изменение конфигурации также требует вызова обновления:

chart.options.scales.x.title.text = 'Новый заголовок';
chart.update();

Обновление может затрагивать:

  • оси (scales);
  • легенду (legend);
  • tooltip;
  • layout и padding;
  • анимации.

Некоторые изменения требуют полного пересчёта layout, особенно при изменении:

  • типа оси;
  • структуры datasets;
  • формата данных.

Анимации при обновлении

По умолчанию update() запускает анимацию перехода между состояниями.

Управление анимацией

chart.update('none'); // без анимации

или через конфигурацию:

options: {
  animation: {
    duration: 1000
  }
}

При обновлении Chart.js интерполирует значения:

  • координаты точек;
  • высоты столбцов;
  • углы дуг (pie/doughnut);
  • прозрачность элементов.

Оптимизация частых обновлений

При работе с потоковыми данными важно учитывать производительность.

Рекомендованные практики:

1. Использование none

chart.update('none');

Минимизирует перерасчёт анимации.

2. Группировка изменений

chart.data.datasets[0].data.push(10);
chart.data.datasets[0].data.push(20);
chart.data.datasets[0].data.push(30);

chart.update('none');

3. Ограничение объёма данных

Удаление старых значений:

if (chart.data.datasets[0].data.length > 50) {
  chart.data.datasets[0].data.shift();
}
chart.update('none');

Внутренние механизмы перерасчёта

При вызове chart.update() происходит взаимодействие нескольких подсистем:

  • Controller — управляет логикой графика;
  • Scale system — пересчитывает оси;
  • Layout engine — распределяет элементы;
  • Element layer — отвечает за визуализацию;
  • Animator — управляет переходами.

Каждый режим обновления влияет на глубину перерасчёта этих компонентов.

Сравнение режимов обновления

Режим Анимация Пересчёт layout Производительность Назначение
default да полный средняя стандартные изменения
none нет полный высокая частые обновления
resize частично да средняя изменение размеров
active нет/частично частичный высокая интерактивность
reset да полный средняя сброс состояния

Поведение при множественных вызовах

Частые вызовы chart.update() могут приводить к:

  • лишним перерасчётам layout;
  • блокировке UI;
  • падению FPS при сложных графиках.

Для предотвращения используется:

  • debounce;
  • requestAnimationFrame;
  • пакетная обработка изменений.

Пример:

let pending = false;

function safeUpdate(chart) {
  if (pending) return;

  pending = true;
  requestAnimationFrame(() => {
    chart.update('none');
    pending = false;
  });
}

Обновление при динамическом добавлении datasets

Добавление нового набора данных требует полного пересчёта структуры:

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

chart.update();

При этом:

  • пересчитываются оси;
  • обновляется легенда;
  • перераспределяются цвета и стили;
  • пересобираются элементы графика.

Особенности поведения в разных типах графиков

Line / Bar

  • основной акцент на пересчёте координат;
  • высокая чувствительность к изменениям данных.

Pie / Doughnut

  • пересчитываются углы сегментов;
  • важна синхронизация суммарных значений.

Radar

  • требуется пересчёт радиальных координат;
  • обновление влияет на всю сетку.

Итоговая логика применения update-модели

Метод chart.update() является точкой синхронизации состояния графика с визуальным представлением. Режим обновления определяет глубину перерасчёта, влияние на анимации и производительность, позволяя адаптировать поведение библиотеки под конкретный сценарий — от редких интерактивных изменений до высокочастотных потоковых обновлений данных.

Оглавление