Комментарии 17
Тут важный вопросы — зачем вам графики. Как человек который уже полгода приделываю графики к приложению могу заметить что есть два основных use-case'a:
1. Когда график надо просто показать.
2. Когда график надо изменять в реалтайме.
И вот для второго варианта нужны т.н. Reusable Charts. И лучшая бесплатная библиотека (imho) которая это реализует — c3.js (она сделана на базе d3.js о ней не так давно говорили на RadioJS).
А если просто показать… ну тут уже действительно выбираешь что ближе…
1. Когда график надо просто показать.
2. Когда график надо изменять в реалтайме.
И вот для второго варианта нужны т.н. Reusable Charts. И лучшая бесплатная библиотека (imho) которая это реализует — c3.js (она сделана на базе d3.js о ней не так давно говорили на RadioJS).
А если просто показать… ну тут уже действительно выбираешь что ближе…
c3 по моему еще очень молода — там у них по документации на сайте голяк на треть еще. Полгода назад искал либу для графиков, натыкался на них, на тот момент документация на половину была пуста.
Да, я тоже полгода назад смотрел — и отказался. А сейчас посмотрел и перешел на нее.
Документация действительно не вся заполнена, хотя API работает все. И поддержка шустрая. Примеры очень полные, комбинации дают богатые возможности (где-то 5\6 от amCharts) и судя по звездочкам и ишьюсам ее сейчас много кто использует (а значит баги всплывают\закрывают часто).
До этого сидел на d4 — хорошая штука. Но не Reusable, и разработчик (хоть и классный парень) но довольно сильно занят(
Документация действительно не вся заполнена, хотя API работает все. И поддержка шустрая. Примеры очень полные, комбинации дают богатые возможности (где-то 5\6 от amCharts) и судя по звездочкам и ишьюсам ее сейчас много кто использует (а значит баги всплывают\закрывают часто).
До этого сидел на d4 — хорошая штука. Но не Reusable, и разработчик (хоть и классный парень) но довольно сильно занят(
И важный момент, что она очень легко расширяется и если чего-то нет в API добавить новый метод — обычно 2-3 строчки. Например изначально нет возможности сбросить максимальные и минимальные значения для axis'ов, но это легко дополняется:
//Range
c3.chart.fn.axis.reset_range = function () {
this.axis.max(undefined);
this.axis.min(undefined);
};
Недавно стояла задача отобразить большое количество данных на графиках. В кратце, нужно было отобразить столбики которые являются стеком других данных. Данных иногда так много было, либо разброс между высотой данных в стеке велик, что некоторым в стеке приходилось делить пиксель.
C3.JS с задачей не справилась, начала задыхаться. Иногда даже цвета неправильно отображала. Пришлось переписать на Highcharts.js, которая корректно отобразила данные. Но, правда работала чуток медленней.
C3.JS с задачей не справилась, начала задыхаться. Иногда даже цвета неправильно отображала. Пришлось переписать на Highcharts.js, которая корректно отобразила данные. Но, правда работала чуток медленней.
JSXGraph еще одна хорошая библиотека. Особенно для отображения в локальных html страницах.
Стоит упоминания еще и jqplot Сам не использовал, но возможности впечатляют. Рендер на canvas.
В статье же не хватает информации о минусах данных библиотек.
Например, так как я активно использую flot могу сказать, что очень напрягает отсутствие рендера легенды на канве, а так же подписей секторов на круговых диаграммах, что делает проблематичным экспорт диаграмм в изображение. Так же существует серьезная проблема с казалось бы базовой фичей библиотек для рисования диаграмм — подписью значений столбцов, точек на графиках и тп. Существующий плагин valuelabels написан криво и, вместо того чтобы переписать его нормально, его кучу раз форкают исправляя у себя только часть его багов без обратных pull-реквестов.
В статье же не хватает информации о минусах данных библиотек.
Например, так как я активно использую flot могу сказать, что очень напрягает отсутствие рендера легенды на канве, а так же подписей секторов на круговых диаграммах, что делает проблематичным экспорт диаграмм в изображение. Так же существует серьезная проблема с казалось бы базовой фичей библиотек для рисования диаграмм — подписью значений столбцов, точек на графиках и тп. Существующий плагин valuelabels написан криво и, вместо того чтобы переписать его нормально, его кучу раз форкают исправляя у себя только часть его багов без обратных pull-реквестов.
MeteorCharts выдаёт ошибку 403. Хабраэффект? :-)
Вот и проверили Meteor на устойчивость к нагрузкам.
Вот и проверили Meteor на устойчивость к нагрузкам.
Вот еще замечательное сравнение 35 библиотек для рисования графиков в JS.
А есть что-то крутое для отображения графов? Типа такого.
d3js, sigmajs, arborjs
Ваш пример больше похож на диаграмму, нежели на граф. www.jgraph.com www.jointjs.com www.jsplumb.org
«и сводных таблиц»
Спасибо! Статья пригодилась.
Вдруг кто подскажет — каким из перечисленных инструментов наиболее оптимально будет не только создавать графики, подобные этому, но и анимировать их? Анимация требуется довольно простая — за некое время постепенно показывать все точки, начиная например с самой нижней и постепенно показывая все точки до верха.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц