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