Учебник Chart.js

Введение в Chart.js
- Что такое Chart.js и зачем он нужен
- Сравнение с другими библиотеками визуализации
- Версии библиотеки и история изменений
- Где применяется Chart.js
- Обзор архитектуры и принципов работы
Установка и настройка окружения
- Подключение через CDN
- Установка через npm и yarn
- Работа с модульными сборщиками: Webpack, Vite, Rollup
- Подключение в проектах на React, Vue, Angular
- Минимальная рабочая конфигурация
- Структура файлов проекта
Основы работы с библиотекой
- Создание элемента canvas
- Инициализация объекта Chart
- Структура объекта конфигурации
- Объект data: datasets и labels
- Объект options: глобальные параметры
- Уничтожение и пересоздание графика
- Доступ к экземпляру графика из JavaScript
Типы графиков
- Линейный график (line)
- Столбчатая диаграмма (bar)
- Горизонтальная диаграмма (bar с indexAxis)
- Круговая диаграмма (pie)
- Кольцевая диаграмма (doughnut)
- Полярная диаграмма (polarArea)
- Радарная диаграмма (radar)
- Пузырьковая диаграмма (bubble)
- Точечная диаграмма (scatter)
- Смешанные типы на одном холсте
Наборы данных (datasets)
- Структура объекта dataset
- Привязка данных к осям
- Несколько datasets на одном графике
- Использование объектов {x, y} вместо массивов
- Временны́е данные в datasets
- Динамическое добавление и удаление datasets
- Видимость datasets и программное переключение
Настройка осей
- Типы осей: linear, logarithmic, category, time, timeseries
- Ось X и ось Y: базовая конфигурация
- Минимум, максимум и шаг делений
- Настройка сетки (grid)
- Настройка делений (ticks)
- Форматирование подписей делений через callback
- Вторичные оси (dual axis)
- Инвертирование оси
- Ось времени: форматы, парсинг, единицы
Заголовок и легенда
- Включение и позиционирование заголовка
- Динамическое изменение заголовка
- Настройка шрифта и отступов заголовка
- Структура объекта legend
- Позиция легенды: top, bottom, left, right, chartArea
- Кастомная отрисовка легенды через legendItems
- Фильтрация и сортировка элементов легенды
- Обработка кликов по легенде
Всплывающие подсказки (Tooltips)
- Включение и базовая настройка tooltips
- Режимы позиционирования: index, dataset, point, nearest
- Форматирование заголовка и тела подсказки
- Callback-функции: title, label, footer, afterBody
- Кастомный внешний tooltip через external
- Цвета, шрифты и отступы в tooltips
- Фильтрация точек в tooltip через filter и itemSort
- Отображение нескольких осей в одном tooltip
Цвета и стили
- Цвета фона и границ
- Прозрачность через rgba
- Градиентная заливка с CanvasGradient
- Паттерны через CanvasPattern
- Цветовые схемы для множества datasets
- Стили точек: форма, размер, цвет
- Пунктирные и кастомные линии через borderDash
- Заливка области под линией (fill)
Анимации
- Принцип работы анимационного движка
- Настройка duration и easing
- Анимация при обновлении данных
- Анимация при появлении datasets
- Отключение анимации
- Коллбеки onProgress и onComplete
- Создание кастомных анимаций через animations и transitions
- Анимация отдельных свойств
Плагины
- Архитектура плагинной системы
- Встроенные плагины: title, legend, tooltip, decimation, filler, colors, subtitle
- Хуки жизненного цикла плагина
- Написание собственного плагина
- Регистрация плагина глобально и локально
- Передача опций в плагин
- Плагин для отрисовки кастомных элементов на canvas
- Порядок выполнения хуков
Взаимодействие и события
- Настройка режима взаимодействия (interaction mode)
- Обработка событий onClick и onHover
- Определение элемента под курсором: getElementsAtEventForMode
- Программная активация hover-состояния
- Синхронизация нескольких графиков
- Обработка событий касания на мобильных устройствах
- Курсор и визуальный отклик на взаимодействие
Обновление данных
- Мутация данных напрямую
- Метод chart.update() и режимы обновления
- Добавление точек через push и splice
- Потоковое обновление в реальном времени
- Ограничение количества точек (скользящее окно)
- Обновление options без пересоздания графика
- Принудительный ресайз: chart.resize()
Работа с временны́ми рядами
- Адаптер дат: date-fns, Luxon, Moment.js
- Подключение и регистрация адаптера
- Формат входных данных для оси времени
- Параметры unit, round, tooltipFormat, displayFormats
- Пропуски в данных: spanGaps
- Временна́я ось с нерегулярными интервалами
- Timeseries vs Time: в чём разница
Масштабирование и прокрутка
- Плагин chartjs-plugin-zoom
- Подключение и настройка hammer.js
- Зум колёсиком мыши
- Зум выделением области (drag)
- Прокрутка (pan) по осям
- Сброс зума программно
- Ограничение диапазона масштабирования
Адаптивность и размеры
- Параметр responsive и его поведение
- maintainAspectRatio и соотношение сторон
- Ресайз при изменении контейнера
- Явное задание ширины и высоты
- Ограничения canvas в браузерах
- Корректная отрисовка на Retina-дисплеях
Производительность
- Decimation: прореживание данных
- Отключение ненужных плагинов
- Выбор между updateMode: 'none' и 'active'
- Работа с большими объёмами данных
- Lazy rendering и отрисовка по требованию
- Профилирование отрисовки через DevTools
Экспорт и печать
- Экспорт в PNG через toBase64Image()
- Скачивание изображения через ссылку
- Экспорт в PDF через jsPDF
- Настройка фона перед экспортом
- Печать через window.print и CSS
Локализация и доступность
- Форматирование чисел под локаль
- Разделители тысяч и дробной части
- Подписи для скринридеров через aria-label
- Поддержка клавиатурной навигации
- Цветовая доступность: контраст и дальтонизм
Глобальные настройки и defaults
- Объект Chart.defaults
- Изменение глобальных шрифтов и цветов
- Переопределение defaults для конкретного типа
- Регистрация кастомных компонентов
- Tree-shaking: импорт только нужных компонентов
- Регистрация через Chart.register()
Расширение Chart.js
- Создание кастомного типа графика
- Наследование от существующих контроллеров
- Кастомные элементы (Element)
- Кастомные шкалы (Scale)
- Переопределение методов draw и update
- Интеграция с D3.js для дополнительных расчётов