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

[FDA847]

Ух ты! Как раз по таким графикам инфу искал. Спасибо за обзор! Бегло их все посмотрел, мне как-то библиотека Chart.js приглянулась.

[Naves]

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

[StSav012]

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

[Nobbs_Nobby]

Я плоховато разбираюсь в верстке. Но разве 20к dom-элементов сами по себе не требовательны к железу? Особенно при сдвиге и прочих анимациях.

[Odrin]

amCharts рендерит в svg. Попробуйте Charts.js, там рендер в canvas. Ну и загрубление — это не костыль, а хорошая оптимизация. Алгоритм Дугласа-Пекера может давать хорошие результаты с незначительными видимыми изменениями, если правильно подобрать коэффициент допуска.

[SirrioN]

Если хотите производительности, то используйте D3. Тем самым вы избавитесь от лишних фич/наворотов крупных библиотек. К тому же, D3 подходит для коммерческих проектов, в отличии от всех остальных либ.
Для прореживания данных советую использовать алгоритм Вращающейся двери (SwingingDoor). Он сохраняет общую динамику графика. Но с параметрами тоже придется поиграться, что бы добиться наилучшего результата.

[inv2004]

Продублирую свой старый комментарий о том, что из всех этих библиотек с большим объёмом точек справлялся только highcharts. amCharts, насколько помню — был самым медленным даже на средних объёмах.

habr.com/ru/company/ruvds/blog/423983/#comment_19142449

[Smetanchik]

Highcharts и правда быстрая. Но эта скорость достигается за счет снижения удобства использования. Разработчики сами диктуют форматы данных, избавляясь от «лишних» калькуляций. Если посмотреть субъективно, то возможностей из коробки у AnyChart/AmCharts гораздо больше. Меньше надо конфигурировать и пр. Ну и тут на вкус и цвет формастеры разные :) Если важнее скорость, то результат того стоит. Но чтобы запилить что-то серьезное в OEM к Highcharts нужен еще бубен, пару пачек чая и с неделю времени ;)

[lekzar]

пытался какое-то время работать с Гугл-чартами, но постоянные ограничения, проблемы с производительностью, отсутствие функционала и баги, висящие с 2014-ого года заставили взяться за D3. В принципе, ничего сложного там нет, есть куча примеров, например techslides.com/over-2000-d3-js-examples-and-demos

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

Конечно, если вся задача состоит в том, чтобы отрисовать столбики по нескольким цифрам, подойдет что угодно

[FDA847]

Сейчас пользуемся графиками от гугла. Простейший график из 100 точек около 1,5-2 сек формируется. Очень неприятно.

[UncleJey]

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

[Smetanchik]

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

[habradante]

А как же jqPlot? Бесплатная, низкий порог вхождения, отличная документация с примерами, много чего можно кастомизировать. Большое количество видов графиков.

[Smetanchik]

Я перечислил лишь 10 топовых (по моему мнению). Список на это не заканчивается, само собой :)

[Spunreal]

Есть отличная обёртка над D3 — c3js.org

[Desprit]

Пользуюсь chart.js + ng2-charts. Достаточно богатый и хорошо задокументированный API. Плюс, много ответов на SO и готовых решений на всякий jsfiddle'ах и т.д. До этого пробовал Plotly и Highcharts. Возможно, из-за отсутствия тогда опыта, но довалось очень сложно. Правильно написали выше — хорошо бы указать порог вхождения в каждую из библиотек.

[sborisov]

Некоторое время назад, искали библиотеку для построения отчётов в desktop приложении.
Приложение написано на Qt, отчёты формировались через html с показом через qwebkit.
Из нескольких просмотренных очень понравилась Chart.js.
Библиотека очень гибкая, удобная. Документация отличная.
Лицензия опять таки позволяет встраивать библиотеку в приложение.
Google Charts — нужно грузить только с серверов google.
А вот как выглядит в десктопном приложении.
Причём график интерактивный и можно, кликая мышкой, включать и отключать ненужный график
Perfomon console
Perfomon report

[GHostly_FOX]

Спасибо за подборку. В закладки…

[RomanPokrovskij]

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

[xmmx]

Для отображения большого числа точек есть специальные типы чартов. Например, Stock Chart

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

Конечно можно и сервер-сайд с зумингом, но зачем? )

[RomanPokrovskij]

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

[raamid]

А почему бы не сделать сайт, на котором выложить демки этих нескольких библиотек?

[avengerweb]

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

[xmmx]

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

[shiko_1st]

Странно, что в списке нет DevExtreme

[GHostly_FOX]

DevExtreme это не только charts, он имеет гораздо больше функционала… для него отдельная статья нужна )))

[danSamara]

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

[Smetanchik]

Очень интересно услышать почему вы так считаете :)

[beat]

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