Chart.js была создана и анонсирована в 2013 году, но с тех пор прошла долгий путь. Это программное обеспечение с открытым исходным кодом, лицензированное по очень либеральной лицензии MIT, и поддерживается активным сообществом.
🎨 Особенности
Chart.js предоставляет набор часто используемых типов графиков, плагинов и опций настройки. В дополнение к разумному набору встроенных типов графиков, вы можете использовать дополнительные типы графиков, поддерживаемые сообществом. Более того, возможно комбинировать несколько типов графиков в смешанный график (по сути, объединяя несколько типов графиков в одном на одном холсте).
Chart.js имеет высокую степень настройки с помощью пользовательских плагинов для создания аннотаций, функций масштабирования или перетаскивания, чтобы назвать лишь некоторые.
⚙️ Настройки по умолчанию
Chart.js поставляется с хорошей конфигурацией по умолчанию, что делает его очень простым в использовании и позволяет быстро создать приложение, готовое к производству. Скорее всего, вы получите очень привлекательный график, даже если не укажете никаких опций. Например, в Chart.js анимации включены по умолчанию, так что вы можете мгновенно привлечь внимание к истории, которую рассказываете с помощью данных.
🔗 Интеграции
Chart.js поставляется с встроенными типами TypeScript и совместим со всеми популярными фреймворками JavaScript, включая React, Vue, Svelte и Angular. Вы можете использовать Chart.js напрямую или воспользоваться хорошо поддерживаемыми обертками, которые позволяют более естественно интегрироваться с вашими предпочтительными фреймворками.
👩💻 Опыт разработчика
Chart.js имеет очень подробную документацию (да, вы её читаете), справочник API и примеры. Поддерживающие и члены сообщества активно участвуют в обсуждениях на Discord, GitHub Discussions и Stack Overflow, где более 11,000 вопросов помечены тегом chart.js.
🎨 Рендеринг на Canvas
Chart.js рендерит элементы графиков на HTML5 canvas, в отличие от нескольких других библиотек для построения графиков, основанных на D3.js, которые рендерят в формате SVG. Рендеринг на canvas делает Chart.js очень производительным, особенно для больших наборов данных и сложных визуализаций, которые в противном случае потребовали бы тысячи узлов SVG в дереве DOM. В то же время рендеринг на canvas не позволяет использовать CSS-стили, поэтому вам придется использовать встроенные опции для этого или создать пользовательский плагин или тип графика, чтобы отобразить всё по вашему вкусу.
⚡ Производительность
Chart.js очень хорошо подходит для больших наборов данных. Такие наборы данных могут быть эффективно загружены с использованием внутреннего формата, так что вы можете пропустить парсинг и нормализацию данных. В качестве альтернативы можно настроить уменьшение данных, чтобы отобрать выборку из набора данных и уменьшить его размер перед рендерингом.
В конечном итоге рендеринг на canvas, который использует Chart.js, снижает нагрузку на ваше дерево DOM по сравнению с рендерингом SVG. Также поддержка tree-shaking позволяет включать минимальные части кода Chart.js в ваш пакет, уменьшая размер пакета и время загрузки страницы.
🌍 Сообщество
Chart.js активно разрабатывается и поддерживается сообществом. С незначительными релизами примерно раз в два месяца и основными релизами с разрушающими изменениями каждые несколько лет, Chart.js сохраняет баланс между добавлением новых функций и тем, чтобы это не стало обременительным для пользователей.