15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц

[darkkosinus]

Тут важный вопросы — зачем вам графики. Как человек который уже полгода приделываю графики к приложению могу заметить что есть два основных use-case'a:
1. Когда график надо просто показать.
2. Когда график надо изменять в реалтайме.

И вот для второго варианта нужны т.н. Reusable Charts. И лучшая бесплатная библиотека (imho) которая это реализует — c3.js (она сделана на базе d3.js о ней не так давно говорили на RadioJS).

А если просто показать… ну тут уже действительно выбираешь что ближе…

[Makito]

c3 по моему еще очень молода — там у них по документации на сайте голяк на треть еще. Полгода назад искал либу для графиков, натыкался на них, на тот момент документация на половину была пуста.

[darkkosinus]

Да, я тоже полгода назад смотрел — и отказался. А сейчас посмотрел и перешел на нее.
Документация действительно не вся заполнена, хотя API работает все. И поддержка шустрая. Примеры очень полные, комбинации дают богатые возможности (где-то 5\6 от amCharts) и судя по звездочкам и ишьюсам ее сейчас много кто использует (а значит баги всплывают\закрывают часто).
До этого сидел на d4 — хорошая штука. Но не Reusable, и разработчик (хоть и классный парень) но довольно сильно занят(

[darkkosinus]

И важный момент, что она очень легко расширяется и если чего-то нет в API добавить новый метод — обычно 2-3 строчки. Например изначально нет возможности сбросить максимальные и минимальные значения для axis'ов, но это легко дополняется:

//Range
c3.chart.fn.axis.reset_range = function () {
    this.axis.max(undefined);
    this.axis.min(undefined);
};

[InfiniteCode]

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

C3.JS с задачей не справилась, начала задыхаться. Иногда даже цвета неправильно отображала. Пришлось переписать на Highcharts.js, которая корректно отобразила данные. Но, правда работала чуток медленней.

[Harrix]

JSXGraph еще одна хорошая библиотека. Особенно для отображения в локальных html страницах.

[Tab10id]

Стоит упоминания еще и jqplot Сам не использовал, но возможности впечатляют. Рендер на canvas.

В статье же не хватает информации о минусах данных библиотек.
Например, так как я активно использую flot могу сказать, что очень напрягает отсутствие рендера легенды на канве, а так же подписей секторов на круговых диаграммах, что делает проблематичным экспорт диаграмм в изображение. Так же существует серьезная проблема с казалось бы базовой фичей библиотек для рисования диаграмм — подписью значений столбцов, точек на графиках и тп. Существующий плагин valuelabels написан криво и, вместо того чтобы переписать его нормально, его кучу раз форкают исправляя у себя только часть его багов без обратных pull-реквестов.

[abiruba]

Использовал пару лет назад. Неплохая либа.

[CuamckuyKot]

MeteorCharts выдаёт ошибку 403. Хабраэффект? :-)

Вот и проверили Meteor на устойчивость к нагрузкам.

[n0ne]

Вообще-то Апач (-:

[KEKSOV]

Вот еще замечательное сравнение 35 библиотек для рисования графиков в JS.

[Stalker_RED]

А есть что-то крутое для отображения графов? Типа такого.

[werktone]

d3js, sigmajs, arborjs

[wlw]

Ваш пример больше похож на диаграмму, нежели на граф. www.jgraph.com www.jointjs.com www.jsplumb.org

[killest]

«и сводных таблиц»

[aldous]

Спасибо! Статья пригодилась.

[lamo4ok]

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