Как стать автором
Обновить

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

Время на прочтение 9 мин
Количество просмотров 140K
Всего голосов 31: ↑27 и ↓4 +23
Комментарии 29

Комментарии 29

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

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

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

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

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

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

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

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

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

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

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

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

когда смотришь размер этих самых «lightweight» библиотек — становиться страшно, даже с учетом того, что можно создать кастомный бандл с нужными чартами, все равно минифицированный файл в 400 кб это очень много
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории