Есть в графиках что-то магическое. Изгиб кривой мгновенно раскрывает всю ситуацию — историю развития эпидемии, паники или периода процветания. Эта линия просвещает, пробуждает воображение, убеждает.
― Генри. Д. Хаббард
Объемы данных, с которыми нужно работать, постоянно увеличиваются. И чем больше информации, тем сложнее ее обрабатывать. Вот почему сейчас стала особенно популярна тема визуализации данных — в виде графиков, диаграмм, дашбордов, желательно интерактивных. Визуальное представление данных позволяет нам, людям, тратить меньше времени и сил на их просмотр, анализ и осмысление, а также на принятие правильных, информированных решений на основе этого.
Вряд ли кто-то станет отрицать, что в современном HTML5 вебе JavaScript — самая универсальная и простая технология для визуализации данных. Так что, если вы занимаетесь фронтенд-разработкой, то вы, скорее всего, либо уже имели дело с созданием JS чартов, либо столкнетесь с этим в (скором) будущем.
Существует множество JavaScript библиотек для построения графиков и диаграмм, каждая из которых (как и любые другие инструменты) имеет свои плюсы и минусы. Чтобы облегчить вам жизнь, я решил рассказать о тех из них, которые нравятся мне больше всего. Я считаю, десять следующих библиотек — это лучшие JS библиотеки для создания графиков, и они действительно способны помочь решить практически любую задачу по визуализации данных. Давайте вместе пройдемся по списку и убедимся, что они вам известны хотя бы базово и вы не упустили из виду какую-нибудь хорошую библиотеку, которая может оказаться полезной в текущих или будущих больших проектах.
Что ж, приступим: вот лучшие JS библиотеки для визуализации данных!
amCharts
amCharts — одна из JavaScript библиотек, полезных тем, кто ищет простое и в то же время гибкое решение для визуализации данных.
Основные возможности
- Много разнообразных типов графиков, включая интерактивные карты и диаграммы Ганта.
- Возможность анализа данных «вглубь» (дрилдаун) и другие хорошо проработанные интерактивные опции.
- Документация, описывающая все нужные методы, хорошо написана, правда, на мой вкус, не слишком удобна в использовании.
- Крутая анимация графиков.
- Интеграция с React, Angular, Vue, Ember и др.
- Готовый плагин для WordPress.
- Экспорт графиков в изображение или PDF файл.
- «Живые» графики, полноценная кастомизация, специальные возможности в соответствии со стандартами W3C.
- Полная техподдержка для всех пользователей и приоритетная для клиентов с лицензией.
- Клиенты: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT&T и др.
Стоимость
Фирменная маркировка со ссылкой в бесплатной версии. Чтобы убрать брендинг, нужно купить платную лицензию (от $180), плюсом предоставляется доступ к приоритетной поддержке.
Узнать больше об amCharts
AnyChart
AnyChart — хорошо проработанная, легковесная, многофункциональная JS библиотека для визуализации данных с рендерингом в SVG/VML. Позволяет веб-разработчикам создавать всевозможные графики и диаграммы для дальнейшего принятия решений на их основе.
Основные возможности
- Более 80 типов графиков, включая обычные графики, биржевые графики, геовизуализации (карты), а также диаграммы Ганта и сетевые графики PERT.
- Много вариантов, как можно загружать данные: XML, JSON, CSV, JS API, Google Sheets, HTML-таблицы.
- Возможность «углубляться» в данные на графике (дрилдаун).
- Технические индикаторы для технического анализа и аннотации (инструменты для рисования) «из коробки».
- Исчерпывающие документация и описание API, отзывчивая поддержка.
- Интеграция с Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS и др. Для разработчиков приложений и дашбордов в Qlik есть специальный готовый экстеншн для Qlik Sense.
- Множество готовых примеров графиков, диаграмм, дашбордов, а также собственная специальная песочница с автозаполнением кода.
- Поддержка старых версий браузеров.
- Экспорт данных в различные форматы, включая PDF отчеты; JPG, PNG, SVG изображения; Excel (XLSX) или CSV файлы с данными графиков.
- Клиенты: Oracle, Microsoft, Citi, Samsung, Nokia, AT&T, Ford, Volkswagen, Lockheed Martin, и др.
Стоимость
Версия с вотермаркой — бесплатная. Чтобы избавиться от брендинга и получить возможность использовать AnyChart в коммерческих проектах, необходимо приобрести лицензию (от $49).
Узнать больше об AnyChart
Chart.js
Chart.js — простая и в то же время довольно гибкая JavaScript библиотека для визуализации данных, популярная среди веб-дизайнеров и разработчиков. Она представляет собой прекрасное базовое решение для тех, кому не требуется большое разнообразие типов графиков и индивидуальных настроек, но кому достаточно, чтобы графики выглядели аккуратно, наглядно и информативно.
Основные возможности
- 8 типов графиков и диаграмм: линейный (Line), линейный с областями (Area), линейчатый (Bar), круговой (Pie), лепестковый «Радар» (Radar), полярный (Polar), пузырьковый (Bubble) и точечная диаграмма рассеивания (Scatter).
- Все типы графиков можно кастомизировать и снабдить анимацией, и все они адаптивны при работе в сети.
- Функциональность может быть расширена посредством использования плагинов.
- Хорошая документация.
- Поддержка через Stack Overflow.
- Поддержка браузеров IE9+.
Стоимость
Бесплатная библиотека с открытым исходным кодом (open-source). Издана под лицензией MIT.
Узнать больше о Chart.js
Chartist.js
Chartist.js — простая JS библиотека с открытым исходным кодом, которая также может быть использована для создания аккуратных адаптивных графиков и диаграмм. Вообще говоря, она хорошо подходит тем, кому требуются лишь элементарные Line, Bar или Pie графики и не нужно многого в плане визуализации данных. Приятный внешний вид, и нет необходимости в большом количестве всяческих фич.
Основные возможности
- Только 3 типа графиков: Line, Bar, Pie.
- Отличная анимация.
- API документация содержит все необходимые сведения, однако ею не очень удобно пользоваться (приготовьтесь много скролить).
- Позволяет использовать плагины для расширения функциональности.
- Для отрисовки графиков использует SVG.
- Поддержка старых версий браузеров.
Стоимость
Open-source, бесплатное использование в любых целях.
Узнать больше о Chartist.js
D3.js
D3.js — мощная JavaScript библиотека для визуализации данных, с открытым исходным кодом. Имеет более 20 тысяч форков на GitHub. По сути своей, D3 больше походит на фреймворк, нежели на библиотеку. Работать с ней не так просто, особенно поначалу. Но существует множество полезных информационных ресурсов, посвященных D3. И в итоге с помощью этой библиотеки можно с нуля создавать потрясающие оригинальные визуализации и любую графику, что делает D3 действительно стоящим инструментом.
Основные возможности
- Поддерживает многочисленные типы графиков, намного больше, чем подавляющее большинство других JavaScript библиотек (включая, например, диаграмму Вороного).
- На освоение нужно время. Менее понятная и очевидная, чем некоторые коммерческие библиотеки в списке (например, AnyChart). Компенсируется огромным количеством туториалов и реально крутым API.
- Сочетает в себе мощные компоненты визуализации и основанный на данных подход к манипулированию DOM.
- Легко дебажить с помощью инструмента исследования элементов в браузере.
- Море примеров.
- Функции генерации кривых.
- Drag-and-drop GUI.
Стоимость
D3 — это open-source библиотека для создания графиков и диаграмм, которая абсолютно бесплатна для применения в любых целях.
Узнать больше о D3.js
FusionCharts
FusionCharts — это еще одна неплохая библиотека для построения интерактивных графиков и диаграмм, с сотнями готовых примеров. Графики от FusionCharts поддерживают данные как в формате JSON, так и XML. Рендеринг — через HTML5/SVG и VML.
Основные возможности
- Десятки типов графиков, 2D и 3D, и более 950 карт, покрывающих все континенты.
- Анимированные и полностью интерактивные графики и карты.
- Серверный API для ASP.NET, PHP, Ruby on Rails.
- Совместимость с jQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java, и др.
- Довольно детальные руководство пользователя и описание API.
- Множество примеров графиков и дашбордов.
- Поддержка старых версий браузеров.
- Экспорт в PNG, JPG и PDF.
- Поддержка — через базу знаний и комьюнити-форум.
- Безлимитная приоритетная поддержка для пользователей, купивших лицензию.
- Клиенты: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe и др.
Стоимость
Бесплатна для некоммерческого использования. Платные лицензии для коммерческого использования (от $497).
Узнать больше о FusionCharts
Google Charts
Google Charts — отличный выбор для тех проектов, в которых простота и стабильность графиков предпочтительнее сложных, подробных настроек кастомизации.
Основные возможности
- Рендеринг графиков в HTML5/SVG и VML.
- Много примеров графиков, диаграмм, дашбордов.
- Все графики являются интерактивными, некоторые также можно зумить и панить.
- Полноценная документация.
- Поддержка старых версий браузеров.
- Поддержка через FAQ, GitHub и форум.
Стоимость
Бесплатная лицензия, но исходный код не открыт. Не позволяет размещать JS файлы Google на вашем сервере, поэтому может не подойти вам, если вы работаете с конфиденциальными данными.
Узнать больше о Google Charts
Highcharts
Highcharts — одна из самых многофункциональных и популярных JavaScript библиотек для построения графиков и диаграмм в HTML5, с рендерингом в SVG (VML). Она легковесная, поддерживает широкий выбор различных типов визуализаций и обеспечивает высокую производительность.
Основные возможности
- Использует чистый JavaScript. Данные можно загружать извне.
- Достойные документация и описание API-документация, кейсы пользователей.
- Интерактивность, включая дрилдаун (возможность анализа данных «вглубь»).
- Можно использовать с React, Angular, Meteor, .NET, iOS и др.
- Экспорт в PNG, JPG, PDF и SVG форматы.
- Поддержка пользователей бесплатной версии через форум и Stack Overflow. Премиум поддержка по электронной почте и Skype доступна только для коммерческих пользователей, владеющих соответствующей лицензией.
- Клиенты: Visa, Yahoo!, Facebook, Twitter, Groupon, Nokia, Ericsson, Mastercard, Yandex и др.
Стоимость
Бесплатно для использования в некоммерческих целях. Для коммерческого использования необходимо приобрести лицензию (от $50).
Узнать больше о Highcharts
Plotly.js
Plotly.js — это библиотека JavaScript высокого уровня, бесплатная, с открытым исходным кодом. Построена на D3.js и WebGL. Ее можно использовать для создания множества самых разных типов визуализации данных, включая, например, трехмерные статистические графики.
Основные возможности
- 20 типов графиков и диаграмм, которые можно встроить на сайт или использовать для создания динамических презентаций.
- Используется как браузерная чартинг-библиотека для Python, R, MATLAB, абстрагируя графики в декларативную структуру JSON.
- Обширная API документация.
- Неплохая анимация.
- Использует React.
- Экспорт графиков в PNG и JPG. Экспорт в EPS, SVG и PDF доступен по подписке.
- Множество готовых примеров.
- Может работать с таблицами Excel или напрямую с вашей базой данных.
- Форум поддержки.
Стоимость
Бесплатная библиотека с открытым исходным кодом.
Узнать больше о Plotly.js
ZingChart
ZingChart — полезный инструмент для создания интерактивных и адаптивных графиков. Это быстрая и гибкая библиотека, которая позволяет довольно легко работать с большими данными и генерировать графики с большими объемами данных.
Основные возможности
- Поддерживает более 30 типов графиков и диаграмм.
- Полностью кастомизируема, с настройками оформления а-ля CSS.
- Совместима с jQuery, Angular, Node.js, PHP и др.
- Работа с данными в режиме реального времени, быстрый рендеринг наборов данных любого объема.
- Данные можно загружать через JS объекты, JSON, CSV, PHP, AJAX, MySQL.
- Подробная и достаточно удобно читаемая документация по API.
- Бесплатная и премиум поддержка через справочный центр ZingChart, Stack Overflow, электронную почту и чат.
- Клиенты: Microsoft, Boeing, Adobe, Apple, Cisco, Google, Alcatel и др.
Стоимость
Брендированная лицензия обеспечивает полный доступ к библиотеке ZingChart бесплатно. Для коммерческого использования требуется платная лицензия (от $199).
Узнать больше о ZingChart
Заключение
Итак, перечислил лучшие JavaScript библиотеки для построения графиков и диаграмм, по крайней мере те, что я считаю топовыми. Сравнить их все между собой исчерпывающе, с учетом абсолютно всех параметров, было бы очень непросто. У каждой есть свои плюсы и минусы, и выбор во многом зависит от навыков разработчика, а также конкретной задачи.
Конечно, есть какие-то фичи, особенности, которые делают одну библиотеку быстрее, или симпатичнее в плане дизайна, или гибче других. Но, в конце концов, не так важно, какие библиотеки есть в списке, ведь в итоге лучшая — это та, которая наиболее полно соответствует вашим конкретным требованиям в рамках отдельно взятой задачи.
Мой совет — познакомьтесь со всеми этими ведущими библиотеками хотя бы немного поближе: когда вам понадобятся JS чарты для визуализации данных в рамках того или иного проекта, крайне высока вероятность, что именно одна или несколько из них подойдут вам лучше всего. Если же вы желаете иметь дело со списком подлиннее, обратите внимание на сравнение в Википедии.
Если вам понадобится визуализировать данные на интерактивных картах, где первостепенное значение имеют географические тренды, отношения, связи, потоки и т.п., почитайте мою предыдущую статью о лучших JavaScript библиотеках для геовизуализации данных в виде карт (на Хабре есть ее перевод на русский).
Всем хорошего дня и приятной визуализации данных с помощью JavaScript!
Это мой перевод статьи Top JavaScript Charting Libraries for Every Data Visualization Need, опубликованной мною ранее на Hacker Noon.
Автор: Руслан Боровиков
