Chart.js: простой график для веба

Простой линейный график на бумаге: показан прогресс от прошлого к будущему, рядом лежат ручки и линейка.

Chart.js — лёгкая библиотека для интерактивной визуализации в браузере. За несколько строк HTML и JavaScript вы получите адаптивные диаграммы: столбчатые, линейные, круговые и другие. В статье показано, как подключить библиотеку, создать базовую диаграмму, настроить стиль и избежать распространённых ошибок.

Что такое Chart.js?

Chart.js — это бесплатная JavaScript-библиотека, которая рендерит диаграммы на основе HTML5 canvas. Она остаётся популярной благодаря простоте и достаточному набору функций для большинства задач визуализации на веб-сайтах.

Коротко: библиотека рисует графики на canvas, работает в современных браузерах и имеет понятный API.

Основные возможности Chart.js

Небольшой объём кода для быстрого старта.
Поддержка основных типов диаграмм: линии, столбцы, круги, радары и т. д.
Адаптивность: диаграммы корректно отображаются на настольных и мобильных устройствах.
Гибкая система опций и плагинов для тонкой настройки внешнего вида и поведения.

Важно: Chart.js отлично подходит для бизнес-дашбордов, витрин данных и прототипов. Для очень больших объёмов данных или специализированных визуализаций могут понадобиться другие инструменты.

Установка и подключение

Есть два простых способа подключить Chart.js:

CDN — самый быстрый путь. Вставьте тег script в секцию вашего HTML:

Пакетный менеджер — если вы используете сборщик (Webpack, Vite и т. п.).

# npm
npm install chart.js

# или Yarn
yarn add chart.js

Выберите способ в зависимости от архитектуры проекта: CDN — для простых страниц и прототипов, npm/yarn — для приложений с билд-процессом.

Базовая HTML-структура

Добавьте в HTML элемент canvas, в который Chart.js будет рендерить диаграмму:




  
  
  Пример Chart.js
  
  


  Визуализация данных с помощью Chart.js

Пример CSS (файл style.css) для базовой верстки:

@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Tilt Neon", sans-serif;
  padding: 2rem 4rem;
}

h1 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  padding: 3rem;
}

Пример: столбчатая диаграмма шаг за шагом

В этом примере мы создадим столбчатую диаграмму (bar chart), чтобы сравнить значения по категориям.

В скрипте выберите элемент canvas по id:

let canvas = document.getElementById('myChart');

Получите 2D-контекст для отрисовки:

let ctx = canvas.getContext('2d');

Инициализируйте Chart, передав DOM-элемент (или контекст) и объект опций:

let options = {};
let myChart = new Chart(canvas, options);

Заполните options конкретными настройками: тип диаграммы, метки и наборы данных:

let options = {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Количество голосов за цвет',
      data: [12, 19, 3, 5, 2, 3]
    }]
  }
};

let myChart = new Chart(canvas, options);

В результате вы получите простую столбчатую диаграмму.

На этом этапе диаграмма может выглядеть так:

Диаграмма без пользовательского оформления

Настройка стиля и оформления

Chart.js включает множество опций для внешнего вида и поведения:

Цвета: backgroundColor и borderColor для наборов данных.
Легенда: позиция, видимость и стиль текста.
Подсказки (tooltips): форматирование содержания при наведении.
Анимации: скорость, режим и включение/выключение анимации.

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

let options = {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Количество голосов за цвет',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      }
    }
  }
};

let myChart = new Chart(canvas, options);

После добавления стилей диаграмма будет выглядеть более оформленной:

Диаграмма с пользовательским оформлением CSS и настройками Chart.js

Лучшие практики и советы по производительности

Ограничивайте количество точек данных, если диаграмма отображается в реальном времени или встраивается в мобильные страницы.
При частых обновлениях используйте myChart.update() и при необходимости myChart.destroy() перед созданием нового экземпляра.
Включайте только нужные плагины, чтобы уменьшить нагрузку.
Для больших наборов данных рассматривйте агрегацию на серверной стороне и отрисовку уменьшенного набора точек.

Типичные ошибки и как их избегать

Неправильный формат данных: всегда держите структуру data.datasets одинаковой.
Дублирование экземпляров: вызывайте destroy() перед созданием новой диаграммы в том же canvas.
Слишком много анимаций: отключите или упростите анимацию для сложных визуализаций.

Когда Chart.js не лучший выбор

Если нужно отобразить сотни тысяч точек — лучше специализированные решения (WebGL-рендеринг).
Для интерактивных визуализаций с кастомными графическими эффектами и сложными пользовательскими взаимодействиями подойдет D3.js.

Альтернативы: D3.js (максимальный контроль), ECharts (широкие темы и интерактивность), Plotly (готовые аналитические графики).

Ментальные модели и heuristics

“Покажи главное”: начните с упрощённой диаграммы, затем добавляйте детали по мере необходимости.
“Агрегируй и фильтруй”: меньше точек + понятные категории = более ясная визуализация.
“Разделяй ответственность”: сервер подготавливает данные, клиент — отображает и минимально интерактивит.

Роли и контрольный список при создании диаграммы

Разработчик:

Подключил библиотеку (CDN или npm).
Подготовил формат data.datasets.
Реализовал обновление данных через update() или destroy().

Дизайнер:

Утвердил палитру цветов и отступы.
Проверил читаемость легенды и подписей осей.

Продуктовый менеджер:

Сформулировал цель диаграммы и ключевые метрики.
Утвердил сценарии взаимодействия (hover, zoom, экспорт).

Мини-методология: быстрый SOP для диаграммы

Собрать требования: метрики, интервал, аудитория.
Подготовить данные: агрегация, формат JSON.
Выбрать тип диаграммы.
Прототип: минимальный код с CDN и canvas.
Настроить стиль и легенду.
Провести тесты производительности и мобильности.
Внедрить и мониторить использование.

Критерии приёмки

Диаграмма корректно отображает данные в тестовом наборе.
Легенда и подписи читаемы при всех размерах экрана.
Обновление данных проходит без утечек памяти (нет нарастающих экземпляров).

Совместимость и миграционные заметки

Chart.js работает в современных браузерах, использующих canvas. Для старых браузеров проверьте поддержку canvas.
При переходе между основными версиями Chart.js обратите внимание на изменения в API опций и плагинах.

Краткая галерея пограничных случаев

Много категорий по оси X — используйте скролл или уменьшайте плотность подписи.
Очень мелкие значения рядом с большими — подумайте о логарифмической шкале или раздельных диаграммах.

FAQ

Какой способ подключения лучше: CDN или npm?

CDN — быстрый старт и прототипы. npm — для приложений с билдами, где важно управление зависимостями и версиями.

Можно ли обновлять диаграмму без перерисовки всего canvas?

Да. Обновляйте данные и вызывайте myChart.update(). Если структура меняется радикально, лучше destroy() и создать новый экземпляр.

Поддерживает ли Chart.js экспорт в изображение?

Canvas можно экспортировать через toDataURL() для сохранения в PNG/SVG (возможны ограничения при использовании шрифтов или CORS для внешних изображений).

Итог

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

Внимание: при больших объёмах данных задумайтесь о серверной агрегации или рендеринге на WebGL.