10 лучших JavaScript библиотек для визуализации данных на графиках и диаграммах

Original author: Ruslan Borovikov
  • Translation
Есть в графиках что-то магическое. Изгиб кривой мгновенно раскрывает всю ситуацию — историю развития эпидемии, паники или периода процветания. Эта линия просвещает, пробуждает воображение, убеждает.
Генри. Д. Хаббард
Объемы данных, с которыми нужно работать, постоянно увеличиваются. И чем больше информации, тем сложнее ее обрабатывать. Вот почему сейчас стала особенно популярна тема визуализации данных — в виде графиков, диаграмм, дашбордов, желательно интерактивных. Визуальное представление данных позволяет нам, людям, тратить меньше времени и сил на их просмотр, анализ и осмысление, а также на принятие правильных, информированных решений на основе этого.

Вряд ли кто-то станет отрицать, что в современном 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.

Similar posts

Ads

Comments 29

    0
    Ух ты! Как раз по таким графикам инфу искал. Спасибо за обзор! Бегло их все посмотрел, мне как-то библиотека Chart.js приглянулась.
      +3
      Для тех, кто хочет строить полноценные 3d-графики с тремя осями.
      visjs.org/graph3d_examples.html
      Из плюсов, если на 3д графике использовать 4 измерение в виде цвета, можно строить различные heatmap.
        0

        Так и не могу понять, сильно ли требовательны эти движки к железу. У меня почему-то amCharts тормозят при хотя бы 2×10000 точек в Desktop Firefox. А по требованиям нужно ещё и zoom делать мышкой, и новые две точки раз в секунду добавлять. Пришлось костылять загрубление выкидыванием 98% точек. Вот вам и SVG.

          +1
          Я плоховато разбираюсь в верстке. Но разве 20к dom-элементов сами по себе не требовательны к железу? Особенно при сдвиге и прочих анимациях.
            0
            amCharts рендерит в svg. Попробуйте Charts.js, там рендер в canvas. Ну и загрубление — это не костыль, а хорошая оптимизация. Алгоритм Дугласа-Пекера может давать хорошие результаты с незначительными видимыми изменениями, если правильно подобрать коэффициент допуска.
              0
              Если хотите производительности, то используйте D3. Тем самым вы избавитесь от лишних фич/наворотов крупных библиотек. К тому же, D3 подходит для коммерческих проектов, в отличии от всех остальных либ.
              Для прореживания данных советую использовать алгоритм Вращающейся двери (SwingingDoor). Он сохраняет общую динамику графика. Но с параметрами тоже придется поиграться, что бы добиться наилучшего результата.
              +2
              Продублирую свой старый комментарий о том, что из всех этих библиотек с большим объёмом точек справлялся только highcharts. amCharts, насколько помню — был самым медленным даже на средних объёмах.

              habr.com/ru/company/ruvds/blog/423983/#comment_19142449
                0
                Highcharts и правда быстрая. Но эта скорость достигается за счет снижения удобства использования. Разработчики сами диктуют форматы данных, избавляясь от «лишних» калькуляций. Если посмотреть субъективно, то возможностей из коробки у AnyChart/AmCharts гораздо больше. Меньше надо конфигурировать и пр. Ну и тут на вкус и цвет формастеры разные :) Если важнее скорость, то результат того стоит. Но чтобы запилить что-то серьезное в OEM к Highcharts нужен еще бубен, пару пачек чая и с неделю времени ;)
                +1
                пытался какое-то время работать с Гугл-чартами, но постоянные ограничения, проблемы с производительностью, отсутствие функционала и баги, висящие с 2014-ого года заставили взяться за D3. В принципе, ничего сложного там нет, есть куча примеров, например techslides.com/over-2000-d3-js-examples-and-demos

                И в замен на потраченное время ты получаешь практически неограниченные возможности по визуализации.

                Конечно, если вся задача состоит в том, чтобы отрисовать столбики по нескольким цифрам, подойдет что угодно
                  0
                  Сейчас пользуемся графиками от гугла. Простейший график из 100 точек около 1,5-2 сек формируется. Очень неприятно.
                  0
                  было бы здорово указывать порог вхождения, примеры кода. Ведь чтобы график запустить в одних случаях нужно просто массив передать, а в других огород городить. Плюсы, минусы.
                  Это получается что 100500тысячная статья со списком библиотечек и нулевой полезностью. После которой самому проползать весь путь и смотреть где да что.
                    0
                    Эта статья как раз и содержит описание возможностей, ограничений, плюсов, минусов, способов интеграции и даже порогов вхождения. Примеры кода оставим, всё же, профильным статья по каждой библиотеке в отдельности ;)
                    +1
                    А как же jqPlot? Бесплатная, низкий порог вхождения, отличная документация с примерами, много чего можно кастомизировать. Большое количество видов графиков.
                      0
                      Я перечислил лишь 10 топовых (по моему мнению). Список на это не заканчивается, само собой :)
                      +3
                      Есть отличная обёртка над D3 — c3js.org
                        0
                        Пользуюсь chart.js + ng2-charts. Достаточно богатый и хорошо задокументированный API. Плюс, много ответов на SO и готовых решений на всякий jsfiddle'ах и т.д. До этого пробовал Plotly и Highcharts. Возможно, из-за отсутствия тогда опыта, но довалось очень сложно. Правильно написали выше — хорошо бы указать порог вхождения в каждую из библиотек.
                          +1
                          Некоторое время назад, искали библиотеку для построения отчётов в desktop приложении.
                          Приложение написано на Qt, отчёты формировались через html с показом через qwebkit.
                          Из нескольких просмотренных очень понравилась Chart.js.
                          Библиотека очень гибкая, удобная. Документация отличная.
                          Лицензия опять таки позволяет встраивать библиотеку в приложение.
                          Google Charts — нужно грузить только с серверов google.
                          А вот как выглядит в десктопном приложении.
                          Причём график интерактивный и можно, кликая мышкой, включать и отключать ненужный график
                          Perfomon console
                          Perfomon report

                            0
                            Спасибо за подборку. В закладки…
                              +2
                              Из года в год обзор «графиков» ведется с позиций «давайте маркетинговые обещания каталогизировать», и нет обзоров с позиций архитектуры: во первых надо выделить истинно графики по большим данным от всяких «пирогов» и «грантов» (отдельные жанры). Во-вторых из первых надо выделить те которые умеют сервер сайд зум, потому что обещание «мы такие производительные быстро рендерим 100 000 точек» это бред — эти сто тысяч точек слать не надо на монитор с резолюцией в 1000 точек.
                                0
                                Для отображения большого числа точек есть специальные типы чартов. Например, Stock Chart

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

                                Конечно можно и сервер-сайд с зумингом, но зачем? )
                                  0
                                  Зачем не слать 100K точек, если можно слать? Я в том числе работаю в сетях где много ошибок. Производство — фоновые шумы. Экранируй — все кабеля непереэкранируешь, да и я всего лишь подрядчик. А производство это как раз то место где нужны дашбоарды и графики.
                                0
                                А почему бы не сделать сайт, на котором выложить демки этих нескольких библиотек?
                                  0

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

                                    0
                                    У нас в AnyChart есть! :)
                                    Мы недавно добавили Network Graph. Рисуется гораздо проще, чем в D3. Вот докс, вот примеры
                                    +1
                                    Странно, что в списке нет DevExtreme
                                      –1
                                      DevExtreme это не только charts, он имеет гораздо больше функционала… для него отдельная статья нужна )))
                                      0

                                      Этот пост надо было начать с обзора ECharts

                                        +1
                                        Очень интересно услышать почему вы так считаете :)
                                        –1
                                        когда смотришь размер этих самых «lightweight» библиотек — становиться страшно, даже с учетом того, что можно создать кастомный бандл с нужными чартами, все равно минифицированный файл в 400 кб это очень много

                                        Only users with full accounts can post comments. Log in, please.