Вступление
По мере того, как увеличиваются объёмы и сбор данных, необходимость визуализации этих данных становится всё более актуальной. Разработчики ищут способы объединять миллионы записей баз данных в красивые диаграммы, чтобы пользователи могли быстро и интуитивно воспринимать информацию.
В течение последнего десятилетия технологии визуализации данных не прекращали совершенствоваться, и теперь нам доступны многие продвинутые библиотеки. В начале 2000-х годов генерация диаграмм преимущественно производилась на стороне сервера. Такие плагины, как Flash и Silverlight, предлагали больше интерактивности, но с большими затратами системных ресурсов, а также медленной скоростью загрузки и большой нагрузкой на батарею мобильного устройства.
С началом доминирования мобильных платформ такие плагины перестали поддерживаться крупными производителями. Разработчики были вынуждены перейти на открытые технологии, которые способны работать на любых платформах и на стороне клиента.
На данный момент, доминирующими технологиями визуализации данных являются JavaScript и SVG (Scalable Vector Graphics). Благодаря им с визуализацией диаграмм справляются любые браузеры без специальных плагинов. При этом диаграммы прекрасно отображаются даже при самом высоком разрешении, поддерживают анимацию и интерактивность. Я выбрал 9 наиболее интересных библиотек.
D3.js
Это большая и мощная графическая JavaScript библиотека. Она позволяет привязывать произвольные данные к объектной модели документа (DOM), а затем преобразовывать документ на основе этих данных.
D3 выходит далеко за рамки типичных библиотек для диаграмм. Она включает множество небольших технических модулей, например: оси, цвета, иерархии, контуры, плавность, полигоны и многое другое. Всё это создаёт сложности для её изучения.
Создать даже простую диаграмму может оказаться нелегко. Все элементы диаграммы, включая оси, должны быть определены явно. Есть множество примеров, как CSS можно использовать для стилизации элементов диаграмм. В этой библиотеке ничего не применяется автоматически. У вас есть отличная возможность проявить креативность и полностью контролировать каждый элемент. С другой стороны, это не лучший выбор, когда времени на проект совсем мало.
D3.js можно использовать как строительные блоки для других библиотек. Разработчики используют D3 совместно с такими решениями, как NVD3, чтобы упростить процесс.
D3.js является open source проектом и полностью бесплатна.
JSCharting
Библиотека поддерживает большое количество типов диаграмм, включая map, gantt, stock и другие, которые зачастую требуют подключение отдельных библиотек. JSCharting включает в себя карты всех стран мира и набор SVG иконок. Автономный пакет можно рендерить в любых chart-метках или в любом div элементе на странице. UI элементы также включены в пакет. Они позволяют создавать интерактивные диаграммы. Вы можете легко управлять данными или переменными визуализации в режиме реального времени и экспортировать диаграммы в форматы SVG, PNG, PDF и JPG.
Интерфейс библиотеки разделён на две части: выбор типа диаграммы и выбор её функций. После настройки внешнего вида вы получите понятную и аккуратную диаграмму.
Встроенные примеры настраиваются очень просто. Для этого используется объект конфигурации. Чтобы создать более сложную диаграмму потребуется задать несколько параметров свойств. Значения настроек в JSCharting по умолчанию установлены так, чтобы автоматически выбирались лучшие параметры.
В документации вы найдёте уроки и описание API. Многие свойства описаны с примером их использования.
Для некоммерческого и личного использования JS Charting бесплатна. Есть платная коммерческая лицензия, которая включает все типы диаграмм и продуктов.
Highcharts
Этой популярной библиотекой пользуются крупнейшие мировые компании. Диаграммы генерируются в SVG и в альтернативном формате VML для обратной совместимости вплоть до IE6/IE8. Библиотека демонстрирует довольно богатый набор функций, хотя визуально не отличается особой привлекательностью. В документации есть подробные уроки и инструкция оп API. Настраивать параметры диаграмм и API не сложно.
Библиотека Highcharts бесплатна для некоммерческого и личного использования. Чтобы использовать диаграммы типа stock, map и gantt, а также для коммерческого использования потребуется платная лицензия.
amCharts
В четвёртой версии библиотеки добавили мощный анимационный движок для работы с SVG.
Диаграммы выглядят очень приятно, при этом многие из них имеют графический интерфейс для настройки переменных в реальном времени. В документации вы найдёте уроки и полное описание API свойств.
Создание диаграмм в amCharts немного отличается от подхода на основе конфигурирования. Здесь используется более декларативный API. Для этого необходимо чуть больше кода для настройки диаграмм.
amCharts предлагает платную и бесплатную лицензии.
Google Charts
Google диаграммы — это мощный и простой в использовании инструмент.
В галерее представлено множество типов диаграмм, которые выглядят понятными и приятными глазу. Для каждого типа диаграмм вы найдёте уроки с примерами, код для использования функций и описание API.
Диаграммы настраиваются с помощью объекта конфигурации. Данные для диаграмм подключаются через класс DataTable. Их можно применять к любым диаграммам. Каждый тип диаграммы имеет уникальные параметры, о которых можно прочитать в документации по конкретным типам. Именование свойств стандартизировано, и многие параметры работают для всех типов.
Google charts — это бесплатный онлайн сервис, но имейте в виду, что вы не сможете хранить диаграммы локально.
ZingChart
ZingChart предлагает нам множество типов диаграмм и интеграцию с angular, react и другими фреймворками. В ZingChart сильный функционал и множество параметров для настройки. Сервис предлагает широкий выбор тем для стилизации с возможностью настройки.
Документация описывает все типы диаграмм, функционал и работу с API.
ZingChart использует параметры конфигурации для настройки диаграмм. В примерах есть множество параметров свойств, таких как стиль шрифта. В бесплатной версии ваши диаграммы будут содержать логотип ZingChart.
FushionCharts
FusionCharts существует уже много лет на рынке. Это надёжная и проверенная библиотека для визуализации диаграмм. Изначально это был плагин для Flash. FusionCharts поддерживает множество форматов данных, включая XML, JSON и JavaScript. Библиотека работает в современных браузерах и обратно совместима с IE6. Поддерживаются многие JavaScript фреймворки и серверные языки программирования.
На сайте вы найдёте большое количество примеров и документацию с подробным описанием API.
Диаграммы создаются относительно просто. Свойства конфигурации диаграмм сгруппированы по задачам и функциям. Список свойств может быть довольно длинным. Здесь много свойств для детальной настройки, например: {chartLeftMargin, showAlternateHGridColor }.
Бесплатная версия FusionCharts доступна только для личного использования. Ваши диаграммы будут содержать логотип FusionCharts. Также доступна платная лицензия для коммерческого использования.
KOOLCHART
Работа этой JavaScript библиотеки основана на элементе HTML 5 Canvas. KoolChart также позволяет работать с таблицами и картами. В новый релиз добавили больше интерактивных функций и обновили возможности стилизации. Использование canvas оправдано лучшей производительностью за счет растровых изображений.
В примерах используется строковый XML для настройки параметров диаграммы, что кажется менее практичным, чем другие подходы. Эти параметры выглядят как HTML5, но устанавливаются через строку JavaScript.
API и все свойства диаграмм хорошо задокументированы в 173 страничном мануале. Библиотека платная, но у вас есть пробный период в два месяца, чтобы ознакомиться с ней.
Chart.js
Это JavaScript библиотека с открытым исходным кодом, поддерживающая 8 типов диаграмм. Вся библиотека весит всего 60kb. Поддерживаемые типы диаграмм: линейчатые, гистограммы, области, лепестковые, круговые, пузырьковые, точечные и смешанные. Также поддерживается создание временного ряда. Для рендеринга используется элемент canvas. Chart.js поддерживает адаптивность при масштабировании и обратно совместима с IE9. Для работы с IE7 доступны Polyfills.
Визуально диаграммы довольно современны и позволяют использовать анимацию при первой прорисовке. Анимация в режиме реального времени выглядит плавной. Параметры диаграммы можно изменять, вызывая функцию update(), которая перерисовывает диаграмму.
Исходный код доступен в репозитории GitHub. Для создания и изменения диаграмм используются параметры конфигурации. Настройка API интуитивно понятна. Подробная документация включает в себя уроки, описание свойств API и фрагменты кода.
Chart.js — это библиотека с открытым исходным кодом. Она бесплатна для личного и коммерческого использования, но предлагает ограниченное число типов диаграмм.
Заключение
Экосистема JavaScript библиотек для диаграмм значительно изменилась за последнее десятилетие. Сегодня существует большое количество библиотек, которые отвечают самым разнообразным требованиям и предлагают сотни типов диаграмм. Большинство библиотек имеют бесплатную и пробную версии или предлагают встраивать логотип библиотеки. Перед покупкой вы можете ознакомиться с функционалом библиотек.
Большинство библиотек легко справляются с простыми наборами данных и статическими визуализациями. Но с визуализацией динамических данных в реальном времени не всё так гладко. Может потребоваться дополнительная настройка и упорядочивание элементов, чтобы диаграммы выглядели правильно. Но при визуализации динамических данных вся ручная настройка может пойти коту под хвост. Чтобы выбрать лучшее решение для ваших задач, я рекомендую протестировать несколько библиотек на реальных данных.
Перевод статьи Arthur Puszynski: These are the best JavaScript chart libraries for 2019
