Лучшие библиотеки JavaScript для создания диаграмм

Перевод статьи «These are the best JavaScript chart libraries for 2019».

Библиотеки JavaScript для визуализации данных

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

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

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

В настоящее время в визуализации данных доминируют JavaScript и SVG (Scalable Vector Graphics). Современные диаграммы работают во всех браузерах, не требуют специальных плагинов, поддерживают интерактивность и анимацию, а также выглядят очень четко даже на устройствах с самым высоким разрешением экрана. Мы рассмотрели больше 50 библиотек для визуализации данных, и среди них выделили следующие девять.

D3.js

D3.js

D3.js это очень популярная и мощная библиотека графики для JavaScript. Она позволяет вам привязывать произвольные данные к объектной модели документа (DOM), а затем изменять этот документ на основе данных.

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

Попытка создать простую диаграмму может быть довольно трудоемкой задачей. Все элементы, включая оси и прочие детали, должны задаваться явно. В примерах показывается, как можно стилизовать элементы диаграммы с помощью CSS. Функционал, не связанный с диаграммой, применяется автоматически. Если вы хотите углубиться в детали и иметь полный контроль над каждым элементом, эта библиотека – лучший выбор для вас. Но если вы вам нужно сделать визуализацию данных в вашем проекте, а сроки поджимают, это вряд ли лучший вариант.

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

Библиотека D3.js имеет открытый исходный код и ее можно использовать бесплатно.

JSCharting

JSCharting

Библиотека JSCharting поддерживает большое количество видов диаграмм, включая картодиаграммы, диаграммы Гантта, биржевые диаграммы и другие, для использования которых часто требуются отдельные библиотеки. JSCharting содержит встроенные карты всех стран мира и библиотеку SVG-значков. Набор отдельных микро-диаграмм может отображаться в любом элементе div на странице. Элементы управления (UiItems) позволяют создавать более богатые интерактивные диаграммы. Библиотеку отличает простота управления данными или переменными визуализации в режиме реального времени. Готовые диаграммы можно экспортировать в форматы SVG, PNG, PDF и JPG.

Галерея на сайте JSCharting разделена по типам диаграмм и примерам функционала. Отлично разработаны стили. В целом графики и диаграммы выглядят красиво и профессионально.

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

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

Библиотека JSCharting бесплатна для коммерческого и личного пользования. Также, заплатив один раз, вы можете приобрести коммерческую лицензию, после чего вам станут доступны все виды диаграмм и другие продукты.

Highcharts

Highcharts

Highcharts это популярная библиотека JavaScript для создания диаграмм, которую используют многие из самых крупных компаний мира. Диаграммы генерируются с использованием SVG. Откат к VML обеспечивает обратную совместимость вплоть до IE6/IE8. Примеры диаграмм на сайте демонстрируют довольно богатый функционал, но визуально особого восхищения не вызывают. Общая документация включает руководства по многим темам и подробную документацию API.

Диаграммы создаются с применением опций конфигурации, а API прост в использовании.

Highcharts бесплатна для некоммерческого и личного пользования. В прочих случаях нужна коммерческая лицензия. Кроме того, отдельные лицензии имеют биржевые диаграммы, картодиаграммы и диаграммы Гантта.

AmCharts

amCharts

Недавно вышла четвертая версия библиотеки amCharts. В нее был включен сильный движок SVG-анимации, позволяющий создавать сцены, напоминающие кино.

Примеры диаграмм выглядят очень красиво. Для большинства демок есть несколько палитр и слайдер UI для регулировки переменных диаграммы в режиме реального времени. Документация включает большое количество руководств и полные описания свойств API.

Создание диаграммы с помощью amCharts немного отличается от других библиотек, где применяется подход на основе конфигурации. Здесь вместо этого используется более декларативный API. Для настройки диаграмм требуется немного больше кода.

AmCharts предлагает бесплатную лицензию с брендированными диаграммами, а если вам это не подходит, есть платная лицензия.

ZingChart

ZingChart

ZingChart предлагает много видов диаграмм и интегрируется с angular, react и другими фреймворками. Эта библиотека имеет хороший набор функций со многими настройками.

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

В документации вы найдете руководства по всем имеющимся типам диаграмм и многочисленным функциям, а также полный список API.

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

С брендингом ZingChart этой библиотекой можно пользоваться бесплатно. Можно избавиться от брендинга, купив лицензию.

FushionCharts

FushionCharts

FusionCharts существует уже много лет, зарождалась эта библиотека еще как плагин для создания диаграмм на основе Flash. Это надежная библиотека для визуализации. Она поддерживает много форматов данных, включая XML, JSON и JavaScript, работает в современных браузерах и имеет обратную совместимость с IE6. Также поддерживаются многие фреймворки JavaScript и языки бэкенда.

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

В документации вы найдете хорошие описания API и примеры для каждого типа диаграмм. Свойства конфигурации сгруппированы по задачам и функциям.

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

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

KoolChart

KoolChart

KoolChart это JavaScript-библиотека для создания диаграмм на основе HTML5 Canvas.

Новый релиз (v5) включает набор более интерактивного функционала и обновленные стили. Диаграммы отличного качества, выглядят современно. Использование canvas предлагает лучшую производительность за счет растровой основы.

В примерах для применения опций используется XML на основе строки, что кажется менее практичным по сравнению с другими подходами. Эти опции выглядят, как HTML5, но на самом деле задаются через строку JavaScript.

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

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

Chart.js

Chart.js

Chart.js это библиотека JavaScript с открытым исходным кодом, поддерживающая 8 типов диаграмм. Отличается малым весом – всего 60kb. В ней есть линейные диаграммы, гистограммы, диаграммы-области, радиальные, круговые, пузырьковые, точечные и смешанные диаграммы. Библиотека использует элементы canvas для рендеринга, диаграммы отзывчивы к изменению размеров окна. Имеет обратную совместимость до IE9.

Примеры диаграмм выглядят очень современно и включают анимацию при первой отрисовке. Анимация плавная, происходит путем добавления серий точек данных в режиме реального времени. После создания диаграмм можно менять их настройки, после чего вызов функции update() приводит к перерисовке диаграммы.

Исходный код примеров диаграмм не показывается в галерее, но его можно найти в GitHub-репозитории. Для создания и изменения диаграмм используются опции конфигурации. Настройки API понятные и интуитивные.

Документация библиотеки подробная, она включает руководства со свойствами API и отрывки кода.

Chart.js это библиотека с открытым исходным кодом, распространяется бесплатно как для личного, так и для коммерческого использования (существенный плюс). Но ограниченное количество видов диаграмм может стать проблемой.

Google Charts

Google Charts

Диаграммы от Google просты в использовании и при этом являются достаточно мощным инструментом. Примеры диаграмм приятны для глаз. В галерее на сайте продемонстрировано много видов диаграмм, но есть еще страница с дополнительными видами, созданными сообществом.

Каждый тип диаграммы имеет собственное руководство и «живые» примеры. В руководство включен код для связанных с данной диаграммой функций и списки API. Все это обеспечивает приятное начало работы с новой библиотекой.

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

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

Заключение

За последние десять лет экосистема библиотек JavaScript для создания диаграмм существенно развилась. На сегодняшний день у нас есть большое количество продуктов для удовлетворения самых разнообразных требований. Все эти библиотеки, содержащие сотни видов диаграмм, обслуживают широкий спектр проектов. Большинство из них предоставляют бесплатную версию (на пробный период или с брендированием диаграмм), позволяющую вам оценить эффективность их работы в условиях вашего проекта и с применением ваших данных.

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

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх