Инициализация объекта Chart

Библиотека Chart.js строится вокруг создания экземпляра класса Chart, который привязывается к HTML-элементу <canvas> и принимает конфигурационный объект, описывающий тип графика, данные и поведение визуализации.

Перед созданием графика требуется получить контекст рисования canvas. Именно этот контекст передаётся в конструктор, поскольку Chart.js использует Canvas 2D API для отрисовки элементов диаграммы.

HTML-разметка для базового графика включает элемент canvas:

<canvas id="myChart"></canvas>

В JavaScript необходимо получить ссылку на элемент и его контекст:

const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');

Контекст ctx является ключевым объектом, через который Chart.js взаимодействует с canvas. Без него создание графика невозможно.

Создание экземпляра Chart

Основной объект библиотеки создаётся через конструктор Chart:

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Январь', 'Февраль', 'Март'],
        datasets: [{
            label: 'Продажи',
            data: [10, 20, 15]
        }]
    }
});

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

1. Context (ctx) Контекст canvas, полученный через getContext('2d').

2. Configuration object Объект конфигурации, определяющий поведение и внешний вид диаграммы.

Структура конфигурационного объекта

Конфигурация Chart.js имеет строго определённую структуру:

{
    type: 'line',
    data: { ... },
    options: { ... },
    plugins: [ ... ]
}

Поле type

Определяет тип графика. Основные значения:

  • 'line' — линейный график
  • 'bar' — столбчатая диаграмма
  • 'pie' — круговая диаграмма
  • 'doughnut' — кольцевая диаграмма
  • 'radar' — радарная диаграмма
  • 'polarArea' — полярная диаграмма

Тип задаёт внутреннюю стратегию рендеринга и набор доступных опций.

Поле data

Содержит данные, которые будут визуализированы:

data: {
    labels: ['Q1', 'Q2', 'Q3'],
    datasets: [
        {
            label: 'Выручка',
            data: [30, 50, 40]
        }
    ]
}

labels задаёт подписи оси категорий. datasets представляет массив наборов данных, каждый из которых отображается отдельно.

Каждый dataset может содержать дополнительные параметры:

  • backgroundColor — цвет заливки
  • borderColor — цвет линии или границы
  • borderWidth — толщина линии
  • tension — сглаживание линии (для line chart)
  • fill — заполнение области под линией

Пример расширенного dataset:

datasets: [{
    label: 'Трафик',
    data: [120, 190, 300],
    borderColor: 'blue',
    backgroundColor: 'rgba(0, 0, 255, 0.2)',
    borderWidth: 2,
    tension: 0.3,
    fill: true
}]

Поле options

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

options: {
    responsive: true,
    scales: {
        y: {
            beginAtZero: true
        }
    }
}

Ключевые категории настроек:

responsive

Определяет адаптивность графика к размеру контейнера:

responsive: true

При значении true график автоматически подстраивается под изменения размеров окна.

scales

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

scales: {
    x: {
        grid: {
            display: false
        }
    },
    y: {
        min: 0,
        max: 100
    }
}

Каждая ось (x, y, а также дополнительные в специализированных графиках) может быть настроена отдельно.

plugins

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

plugins: {
    legend: {
        display: true,
        position: 'top'
    },
    tooltip: {
        enabled: true
    }
}

Поле plugins в конфигурации

Отдельный массив plugins в корневом объекте используется для подключения внешних расширений:

const myChart = new Chart(ctx, {
    type: 'bar',
    data: { ... },
    options: { ... },
    plugins: [customPlugin]
});

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

Модель жизненного цикла объекта Chart

После вызова конструктора создаётся экземпляр, который сохраняется в переменной:

const chart = new Chart(ctx, config);

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

  • update() — обновление графика при изменении данных
  • destroy() — полное удаление графика и освобождение ресурсов
  • render() — принудительная перерисовка
  • stop() и start() — управление анимациями

Пример обновления данных:

chart.data.datasets[0].data = [50, 60, 70];
chart.update();

Особенности инициализации нескольких графиков

На одной странице можно создавать несколько независимых экземпляров Chart:

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

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

Использование динамической конфигурации

Конфигурационный объект может формироваться динамически:

function createConfig(type, dataArray) {
    return {
        type: type,
        data: {
            labels: dataArray.labels,
            datasets: [{
                label: dataArray.label,
                data: dataArray.values
            }]
        }
    };
}

const chart = new Chart(ctx, createConfig('line', {
    labels: ['A', 'B', 'C'],
    values: [5, 10, 15],
    label: 'Данные'
}));

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

Роль состояния экземпляра Chart

Каждый созданный объект Chart хранит:

  • текущие данные (data)
  • конфигурацию (options)
  • состояние анимации
  • внутренние метаданные масштабов и элементов

Изменение свойств напрямую не всегда приводит к обновлению графика, поэтому применяется явный вызов update().

Поведение при повторной инициализации

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

if (window.myChart) {
    window.myChart.destroy();
}

window.myChart = new Chart(ctx, config);

Это предотвращает утечку памяти и наложение графиков.

Важные аспекты инициализации

  • Canvas должен существовать в DOM до создания экземпляра
  • Контекст должен быть именно 2d, WebGL не используется
  • Конфигурация должна соответствовать структуре Chart.js
  • Изменения данных требуют явного обновления
  • Один canvas — один активный экземпляр Chart без уничтожения предыдущего

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

Оглавление