Динамическое изменение заголовка

В библиотеке Chart.js заголовок диаграммы является частью конфигурации плагина title, который находится внутри options.plugins. Несмотря на внешнюю простоту, механизм обновления заголовка тесно связан с жизненным циклом графика и системой перерисовки через chart.update().

Базовая структура заголовка

Заголовок определяется в конфигурации при создании графика:

const config = {
  type: 'bar',
  data: {
    labels: ['Янв', 'Фев', 'Мар'],
    datasets: [{
      label: 'Продажи',
      data: [10, 20, 30]
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Статический заголовок графика'
      }
    }
  }
};

В этой структуре ключевые параметры:

  • display — включает или отключает отображение заголовка
  • text — текст заголовка
  • дополнительные параметры форматирования (color, font, padding, align)

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

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

const myChart = new Chart(ctx, config);

Объект myChart предоставляет доступ к конфигурации через myChart.options.

Изменение заголовка через обновление конфигурации

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

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

Механика обновления включает:

  • изменение внутреннего состояния конфигурации
  • пересчёт layout
  • перерисовку canvas

Динамическое обновление по событию

Изменение заголовка часто связано с пользовательскими действиями:

button.addEventListener('click', () => {
  myChart.options.plugins.title.text = 'Данные за выбранный период';
  myChart.update();
});

Такая модель используется при:

  • переключении фильтров
  • выборе диапазона дат
  • изменении типа отображаемых данных

Обновление заголовка на основе данных

Часто заголовок формируется из входного набора данных:

function updateTitleFromData(data) {
  const sum = data.reduce((a, b) => a + b, 0);

  myChart.options.plugins.title.text =
    `Общий объём: ${sum}`;

  myChart.update();
}

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

Асинхронное изменение заголовка

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

async function loadData() {
  const response = await fetch('/api/sales');
  const data = await response.json();

  myChart.data.datasets[0].data = data.values;

  myChart.options.plugins.title.text =
    `Продажи за ${data.period}`;

  myChart.update();
}

Здесь важно учитывать порядок операций: сначала обновляются данные, затем заголовок, затем выполняется update().

Частичное обновление без полной перерисовки конфигурации

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

myChart.config.options.plugins.title.text = 'Обновлённый текст';
myChart.update();

Однако даже при точечном изменении всё равно вызывается update(), так как библиотека пересчитывает layout.

Условное отображение заголовка

Заголовок можно динамически скрывать:

function toggleTitle(show) {
  myChart.options.plugins.title.display = show;
  myChart.update();
}

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

Формирование многострочного заголовка

Chart.js поддерживает массив строк в поле text, что позволяет создавать многострочные заголовки:

myChart.options.plugins.title.text = [
  'Аналитика продаж',
  'Период: Q1 2026'
];

myChart.update();

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

Динамическое форматирование через функции

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

myChart.options.plugins.title.text = (ctx) => {
  return `Значение: ${ctx.chart.data.datasets[0].data.length}`;
};

myChart.update();

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

Интеграция с внешним состоянием

В архитектурах с состоянием (например, при использовании глобальных store) заголовок становится производным значением:

store.subscribe((state) => {
  myChart.options.plugins.title.text =
    `Регион: ${state.region}`;

  myChart.update();
});

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

Обновление нескольких графиков одновременно

При работе с несколькими экземплярами применяется централизованное управление:

charts.forEach(chart => {
  chart.options.plugins.title.text = 'Синхронизированный заголовок';
  chart.update();
});

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

Производительные аспекты обновления заголовка

Частые вызовы update() могут влиять на производительность, особенно при анимациях и больших наборах данных. В таких случаях применяются:

  • батчинг изменений
  • отключение анимации:
myChart.update('none');
  • минимизация частоты обновлений через debounce/throttle

Динамическая смена стиля заголовка

Помимо текста, можно изменять визуальное оформление:

myChart.options.plugins.title.color = 'blue';
myChart.options.plugins.title.font = {
  size: 18,
  weight: 'bold'
};

myChart.update();

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

Связь заголовка с типом графика

При переключении типа диаграммы часто изменяется и заголовок:

function changeChartType(type) {
  myChart.config.type = type;

  myChart.options.plugins.title.text =
    `Тип графика: ${type}`;

  myChart.update();
}

Заголовок становится индикатором текущего режима визуализации.

Оглавление