Библиотеки диаграмм JavaScript: 13 популярных вариантов

#1 – Chart.js

Chart.js — это практичная библиотека для построения диаграмм, которая использует HTML5 <canvas> для отображения диаграмм.

Библиотека является лучшим выбором для простых проектов по таким причинам, как то, что она адаптивна по умолчанию, и вы также можете применять анимационные эффекты в зависимости от поведения пользователя.

Вот 8 типов диаграмм, которые вы можете создать с помощью Chart.js:

• Диаграмма области
• Гистограмма
• Пузырьковая диаграмма
• Пончики и круговые диаграммы
• Линейный график
• Смешанные типы диаграмм
• Карта полярных областей
• Радарная диаграмма

Что касается простоты использования, синтаксис прост, и даже если вы никогда раньше не работали с JavaScript, создать новую диаграмму несложно.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

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

Пример Chart.js

См. Pen Proof of concept: Chart.js with Background Gradient by Sven (@hofmannsven) на CodePen.

Дополнительные ресурсы Chart.js

• Chart.js + Next.js = красивые информационные панели на основе данных
• Начало работы с Chart.js; Обучение на основе задач

#2 – D3.js

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

D3 позволяет указать набор данных и привязать его к DOM, после чего вы можете использовать функции библиотек для преобразования этих данных в уникальное визуальное представление. Что касается визуального представления, D3 использует HTML-таблицы, SVG и <canvas> для отображения данных на странице.

Если вы когда-либо видели один из этих вращающихся земных шаров с несколькими интерактивными точками данных, скорее всего, презентация была создана с помощью D3. Тем не менее, он хорошо работает и для практического использования, например, базовая диаграмма, которую вы можете увидеть в демонстрации ниже. В конце концов, вы захотите обратиться к официальному разделу учебных пособий для D3, чтобы изучить его более сложные возможности.

Пример D3.js

См. Диаграмму Pen D3 + ReactJS от Web Dev (@ronaldmarin) на CodePen.

D3.js Дополнительные ресурсы

• Учебник по D3.js
• Создание тепловой карты календаря D3.js

№ 3 – Электронные диаграммы Apache

Одна из причин популярности Apache ECharts заключается в том, что вы получаете доступ к сотням готовых примеров диаграмм прямо из коробки. Вы можете убедиться в этом сами, посетив каталог примеров. На этой странице представлены диаграммы и примеры в таких категориях, как линии, гистограммы, круговые диаграммы, точечные диаграммы, тепловые карты, графики и многое другое.

И в каждый отдельный пример включены примеры кода JavaScript и TypeScript. Но это еще не все, есть некоторые реальные преимущества использования этой библиотеки. Вот несколько из них:

• Потоковая передача данных. Хотите создавать интерактивные диаграммы с миллионами точек данных? ECharts использует WebSockets для потоковой передачи данных, чтобы их можно было загружать асинхронно даже при очень больших наборах данных.
• Удобство для мобильных устройств. Когда пользователи просматривают EChart на своих мобильных устройствах, сама диаграмма была оптимизирована для обеспечения интерактивных функций — масштабирования, панорамирования и рендеринга SVG для обеспечения наилучшей доставки.
• Динамические данные. Вы можете передать ECharts несколько (отдельных) точек данных, и библиотека автоматически анимирует диаграмму, чтобы предоставить пользователям интерактивный опыт.
• Доступность. Apache ECharts (версия 4.0 и выше) создан в соответствии с рекомендациями WAI-ARIA.

Вы также можете отображать свои диаграммы на своем веб-сайте, используя внешний CDN.

Пример Apache ECharts

См. пример электронной диаграммы Pen Apache от Vale (@vsigno) на CodePen.

Apache ECharts Дополнительные ресурсы

• Создайте лучший инструмент GitHub Insight за неделю

#4 – Сюжетно

Plotly — материнская компания Dash, решения с низким кодом для развертывания приложений данных. И они разрабатывают собственную графическую библиотеку — Plotly — на месте.

С помощью Plotly вы можете создавать самые простые визуализации диаграмм, но реальная мощь библиотеки заключается в способности создавать диаграммы на основе статистики, трехмерные представления данных и диаграммы на основе финансовых данных.

Он доступен как в виде модуля Node.js, так и может использоваться непосредственно из CDN.

Сюжетный пример

См. аннотацию Pen Add в событии click от plotly (@plotly) на CodePen.

№5 – Фраппе

Библиотека диаграмм Frappe создана людьми, которые создали Frappe Framework. Эта библиотека настолько проста, насколько это возможно. И эта простота является основным фактором популярности библиотеки.

Библиотека не требует внешних зависимостей и может отображать диаграммы SVG, удобные для мобильных устройств, всего за несколько строк кода. Вот пример кода для базовой диаграммы Axis:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

И этот небольшой фрагмент будет преобразован в диаграмму, подобную этой:

Также есть поддержка смешанных диаграмм (несколько диаграмм в одной), аннотаций, тепловых карт и доступен API, если вы планируете обновлять данные в режиме реального времени или экспортировать их.

Пример фраппе

См. Pen Frappe Hello World от Jang Rush (@weakish) на CodePen.

# 6 - Апексчарты

ApexCharts — это очень традиционная библиотека графиков. Основное различие между ApexCharts и Frappe (например) заключается в том, что ApexCharts предоставляет немного больше демонстраций. Но также предлагает встроенную поддержку популярных фреймворков, таких как React, Vue и Angular. Это также означает, что все демонстрационные диаграммы имеют соответствующие образцы, написанные с использованием синтаксиса указанных фреймворков.

Что касается функций, все диаграммы создаются в формате SVG и по умолчанию адаптированы для мобильных устройств. Вы также можете воспользоваться такими функциями, как плавная анимация и аннотации, и настроить палитру темы диаграммы, выбрав один из 10 образцов стилей.

Пример ApexCharts

См. панель мониторинга Pen Realtime от ApexCharts (@apexcharts) на CodePen.

#7 - Г2

Недавно я несколько раз говорил о Ant Design, в том числе в своих статьях о библиотеках компонентов для React.js и Vue. Ant не только чрезвычайно популярен на GitHub, но и нравится сообществам во всех регионах мира.

А библиотека диаграмм G2 (или, как они ее называют, «Грамматика визуализации») — это реализация Ant Design системы построения диаграмм с использованием Ant Design System. Я настоятельно рекомендую посетить домашнюю страницу AntV, где вы найдете множество других библиотек, связанных с визуализацией данных в реальном времени.

Чаще всего он используется для создания таких вещей, как панели администратора, создания путей к данным и создания интерактивных примеров визуализации данных с использованием его механизма рендеринга. Этот движок может отображать диаграммы и векторы данных через WebGL, Canvas и SVG. А поскольку библиотека является подключаемой, вы можете дополнительно улучшить свои диаграммы с помощью более надежных библиотек, таких как D3.js (которую мы видели ранее).

# 8 - грубая визуализация

Библиотека roughViz от Джареда Уилбера представляет собой комбинацию 3 разных библиотек: D3.js, Rough.js и handy — обработчика нарисованных от руки эскизов. Как видно из приведенного выше примера снимка экрана, это не типичная библиотека для построения диаграмм. roughViz создан исключительно для того, чтобы помочь вам создавать нарисованные от руки диаграммы в стиле набросков с использованием JavaScript.

Этот тип библиотеки станет отличным дополнением к личным проектам, другими словами, проектам, которые требуют более творческой искры, чем традиционный профессиональный подход. И сам синтаксис настолько прост, насколько это возможно, очень похоже на Frappe и ApexCharts.

Вы можете убедиться в этом сами в демо ниже.

Пример roughViz

См. демо-версию Pen RoughViz Дэнни Инглишби (@DanEnglishby) на CodePen.

# 9 - Легкие графики

Если вы работаете над проектом, связанным с финансами (или криптовалютой, если на то пошло), совершенно очевидно, что многие из ранее упомянутых библиотек диаграмм просто не подойдут. Таким образом, вот Lightweight Charts — библиотека диаграмм, созданная специально для отображения финансовых диаграмм и графиков.

Мало того, что эта библиотека с открытым исходным кодом и легкая, она также содержит все необходимые функции, которые потребуются для отображения данных диаграммы о финансах и их динамической структуре.

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

«Наши решения для построения графиков с самого начала разрабатывались для работы с огромными массивами данных. Графики остаются отзывчивыми и гибкими даже при наличии тысяч баров даже при обновлении несколько раз в секунду с новыми тиками».

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

Пример упрощенных диаграмм

См. расширенный график Pen TradingView от truong (@truong160196) на CodePen.

Упрощенные диаграммы Дополнительные ресурсы

• Финансовые графики для вашего приложения

№10 – Рекламный щит

Billboard — это библиотека интерфейсных диаграмм, основанная на D3. В нем есть все современные функции, которые вы ожидаете: рендеринг SVG, поддержка сенсорного ввода для мобильных устройств, простой интерфейс и отличная документация по API.

Тем не менее, моя любимая функция, и, возможно, для многих других, заключается в том, что Billboard предоставляет более 230 примеров диаграмм, которые вы можете создать с помощью этой библиотеки. Эти примеры разделены на категории диаграмм, такие как «Основная», «Ось», «Данные», «Сетка», «Взаимодействие», «Регион» и многие другие.

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

Пример Billboard.js

См. Запросы Pen Chart — Billboard.js от DTCC (@dtcc) на CodePen.

#11 – Перспектива

Perspective — один из проектов, которыми управляет FINOS (Open-Source Fintech), а сам FINOS также является частью Linux Foundation. Подобно облегченным диаграммам, Perspective.js ориентирован на предоставление решений для диаграмм для финансовых проектов. Однако он способен на гораздо большее и часто используется в проектах, связанных с электронной коммерцией, сетками данных и сегментацией доставки.

Если вы когда-либо видели диаграммы о Covid-19, аэропортах и ​​крупных спортивных мероприятиях, таких как Олимпийские игры, есть большая вероятность, что интерфейс и интеграция потоков данных были выполнены с помощью Perspective. Он имеет богатый пользовательский интерфейс, оптимизированный для потоков данных и комплексного анализа в реальном времени.

Он доступен для разработчиков JavaScript и Python и использует веб-компонент Custom Elements.

# 12 - Диаграмма пользовательского интерфейса всплывающих окон

Во всяком случае, библиотека диаграмм пользовательского интерфейса Toast — это еще один выбор, который следует учитывать в отношении стилей диаграмм и их дизайна. Функциональность здесь очень похожа на библиотеки, которые мы уже рассматривали.

Я думаю, что область, в которой пользовательский интерфейс Toast отличается от других вариантов, — это его спецификация API. Это, вероятно, один из лучших API, который вы можете получить, и он поставляется с бесплатной подробной документацией. Одной из функций API являются Экземпляры , позволяющие вам динамически изменять данные диаграммы либо из-за того, что ваш источник данных изменился, либо из-за пользовательского ввода.

Типы диаграмм, которые поддерживает Toast, включают столбцы, столбцы, линии, области, пузырьки, древовидные карты, радары, радиальные столбцы и другие. Предпочтительный способ использования этой библиотеки — через npm, но доступен CDN, и все, что вам нужно сделать, это указать контейнер div id="chart" для отображения диаграммы.

# 13 - Перерисовки

Если вы работаете в основном с React.js, библиотека Recharts построена поверх D3.js с React. Он соответствует собственной архитектуре компонентов React.js, а диаграммы, созданные с помощью Recharts, можно отделить и повторно использовать как отдельные компоненты на нужных вам страницах.

Все примеры диаграмм имеют предварительно написанную структуру компонентов на случай, если вы захотите попробовать их в существующем проекте. Библиотека была впервые выпущена в 2016 году, но все еще находится в активной разработке.

Пример перезаписи

См. Pen ReCharts от binu (@binutomy) на CodePen.