Библиотека диаграмм JavaScript
Может ли кто-нибудь порекомендовать конкретную библиотеку построения диаграмм JavaScript, в частности такую, которая вообще не использует flash?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 29
Если вы используете jQuery, я обнаружил, что плавать очень хорош - попробуйте Примеры, чтобы узнать, подходят ли они вашим потребностям, но я обнаружил, что они делают большую часть того, что мне нужно для моего текущего проекта.
Кроме того, ExtJS 4.0 представил отличный набор диаграмм - очень мощный и предназначен для работы с данными в реальном времени.
Моя единственная реальная жалоба на flot заключается в том, что при рендеринге в IE он выглядит ужасно при любом уровне масштабирования, кроме 100% (т.е. все линии / блоки не масштабируются вместе - это определенно проблема для тех из нас, у кого есть дисплеи с высоким разрешением).
Похоже, что флот-чарты выглядят лучше, чем многие другие, на которые я смотрел. Вот ссылка на 20 библиотек диаграмм JavaScript: javascript.open-libraries.com/utilities/chart/…
Мне тоже нравится flot, раньше я уже много раз использовал его в различных веб-приложениях.
Мне нравится flot в целом, но он хочет, чтобы все данные были числами, поэтому, если вы хотите построить что-то вроде продаж на клиента (по имени) или на продукт, это не сработает.
Возможно, это не совсем то, что вы ищете, но
Google Chart API довольно крутой и простой в использовании.
просто помните, Google Chart требует подключения к Интернету, а также имеет некоторые ограничения на количество разрешенных клиентских запросов.
@ user102008: сейчас :) (Вы все еще можете получить доступ к старому API на основе изображений, если хотите)
Google Chart API нельзя использовать в автономном режиме, что плохо для мобильной разработки.
Мне нужно сделать подсвечник горизонтального типа, кто-нибудь знает, возможно ли это с api диаграммы Google?
Это не библиотека Javascript, но она может быть подходящей альтернативой - ознакомьтесь с Google диаграммы, где вы можете создавать диаграммы, передавая данные строки запроса в их веб-службу.
Попробуйте временную шкалу MIT simile, которую можно превратить в диаграмму - http://simile.mit.edu/timeline/
или последний, http://code.google.com/p/gchart/
Мой фаворит (флот) уже упоминался.
Но обязательно исследуйте Орто. Он отлично подходит для древовидных диаграмм и временных шкал.
Взгляните на Блеф. Это порт JavaScript графической библиотеки Gruff для Ruby.
В библиотеке диаграмм dojo много активности, и, что замечательно, я тоже без проблем использую ее в приложении AIR, довольно круто! См. Например там http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Посмотрите API визуализации Google, который является своего рода обобщением более простого Chart API
Protochart - это все, что вам нужно
Я бы рекомендовал gRaphaël для построения диаграмм на чистом JavaScript вместе с библиотекой векторной графики на чистом JavaScript, на которой он построен (Рафаэль).
В настоящее время gRaphaël поддерживает Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.
просто хочу сказать, что для этой библиотеки нет документации, хотя она очень хороша.
Проверьте http://www.highcharts.com!
Highcharts - это библиотека диаграмм, написанная на чистом JavaScript, предлагающая простой способ добавления интерактивных диаграмм на ваш веб-сайт или веб-приложение. Highcharts в настоящее время поддерживает типы линейных, сплайновых, площадных, линейных, столбчатых, линейных, круговых и точечных диаграмм.
Стоит отметить, что эта библиотека бесплатна для некоммерческого использования, но стоит денег для односайтовых и многосайтовых. Однако это кажется довольно разумной ценой.
Сначала это было бессовестной пробкой, но они выглядят ДЕЙСТВИТЕЛЬНО круто !! Это не бесплатно для коммерческого использования, я не знаю, разумны ли цены или нет, но с первого взгляда они выглядят нормально!
Это та же библиотека диаграмм, которая используется в CloudFlare.com, и выглядит она действительно великолепно. Я собирался использовать библиотеку диаграмм DevExpress, которая представляет собой ASP.NET и выполняет рендеринг и изображения на сервере, когда я наткнулся на библиотеку highcharts. Я сразу убедился, что это правильный путь. Когда я узнал, что CloudFlare, у которого есть одна из самых привлекательных панелей / аналитических панелей, которые я когда-либо видел, тоже использует его, меня продали! В настоящее время я экспериментирую с ним, и это сработало при моей первой попытке встроить диаграмму на мою веб-страницу ... так что это тоже кажется простым в использовании!
Еще один голос за Highcharts. Я сейчас им пользуюсь, и это здорово. Поддерживает jQuery, Mootools и Prototype, его очень легко настроить и использовать.
Сам Stackoverflow использует highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
Еще один голос за Highcharts. Я пользуюсь им, и это здорово. Поддержка JQuery (с данными JSON) проста в настройке и использовании.
Я думаю, что highcharts позволяет нам экспортировать диаграммы и графики как изображения. +1 за упоминание highcharts
Растет число решений с открытым исходным кодом и коммерческих решений для построения диаграмм на чистом JavaScript, не требующих Flash. В этом ответе я представлю только варианты с открытым исходным кодом.
Существует 2 основных класса решений JavaScript для графики, для которых не требуется Flash:
- На основе холста, визуализируется в IE с использованием ExplorerCanvas, который, в свою очередь, полагается на VML.
- SVG в стандартных браузерах, отображаемый как VML в IE
У обоих подходов есть свои плюсы и минусы, но для библиотеки диаграмм я бы порекомендовал второй, потому что он хорошо интегрирован с DOM, позволяет манипулировать элементами диаграмм с помощью DOM и, что наиболее важно, настраивать события DOM. Библиотеки диаграмм Canvas, напротив, должны изобретать колесо DOM для управления событиями. Поэтому, если вы не собираетесь строить статические графики без обработки событий, решения SVG / VML должны быть лучше.
Для решений SVG / VML есть много вариантов, в том числе:
- Диаграмма Dojox, хорошо, если вы уже используете Набор инструментов Dojo
- Решения на базе Рафаэль
Рафаэль - очень активная, хорошо обслуживаемая и зрелая графическая библиотека с открытым исходным кодом с очень хорошей кросс-браузерной поддержкой, включая IE 6-8, Firefox, Opera, Safari, Chrome и Konqueror. Raphael не зависит от какой-либо инфраструктуры JavaScript и поэтому может использоваться с Prototype, jQuery, Dojo, Mootools и т. д.
Существует ряд графических библиотек на основе Рафаэля, включая (но не ограничиваясь ими):
- гРафаэль, расширение графической библиотеки Рафаэля
- ИКО, с интуитивно понятным API, основанным на одном вызове функции для создания сложных диаграмм
Раскрытие информации: я разработчик один из форков Ico на гитхабе.
Grafico и Ico - две несовместимые форки первоначального Ico Алекса Янга. Так что утверждать, что Ico превратилась в Grafico, неверно. Grafico - лишь одна из развилок.
Следует отметить, что Рафаэль, похоже, больше не поддерживается. Последняя фиксация была в июле 2010 года или около того.
Просто скачала диаграммы Рафаэля, мне понравилось много, но нет документации, просто чтобы предупредить.
@Alastair: Raphael теперь спонсируется и разрабатывается Sencha ... или так говорят :)
SVG не поддерживается в Android до версии Honeycomb. Если требуется возможность просматривать диаграммы на широком спектре текущих устройств Android, вам придется выбрать решение на основе Canvas. Эта статья о графиках Sencha Touch дает более подробную информацию о мобильных графиках в целом и о том, почему Sencha Touch пошла по пути Canvas.
@ "B Seven" IE9 имеет отличную поддержку SVG, а Raphaël по умолчанию использует SVG в IE9.
@Pallavi, вы абсолютно правы, Android до Honeycomb - практически единственная платформа, которая не поддерживает ни VML, ни SVG, но поддерживает Canvas. Хотя, как указывает сам Google, на Androïd все еще можно использовать Firefox, но это далеко не идеально. Со временем эта проблема исчезнет (соты). К сожалению, это означает, что в настоящее время не существует 100% кроссбраузерного решения.
@JeanVincent +1 за хороший подробный ответ. Один момент, о котором я хотел бы упомянуть, заключается в том, что при выборе фреймворка мы также должны видеть, предоставляет ли конкретный фреймворк возможность экспорта диаграмм, графиков. Я думаю, что во многих случаях люди хотят экспортировать эту диаграмму как изображение, а затем использовать ту же диаграмму в своей презентации. Одним из примеров такого фреймворка является HighCharts. Хотелось бы узнать, есть ли другие альтернативы highcharts.
jqPlot отлично. Если ваши требования довольно "нормальные" и вы просто хотите нарисовать несколько диаграмм, вы, вероятно, не справляетесь с количеством вариантов построения диаграмм в js. Предполагая, что вы не хотите часами заниматься исследованиями, просто используйте jqPlot, поскольку это, вероятно, ваш лучший выбор. Он хорошо охватывает большинство случаев использования для большинства людей. Некоторые из альтернатив специализируются на определенном типе диаграмм или построены с учетом определенного варианта использования.
Я тоже так думаю после некоторых исследований. Прямо сейчас это похоже на одну из лучших доступных бесплатных библиотек диаграмм JS.
Есть еще одна библиотека javascript на основе SVG. Он называется Protovis и исходит от Стэнфордской группы визуализации.
Это также позволяет создавать красивую интерактивную графику и визуализации.
http://vis.stanford.edu/protovis/ex/
Хотя это только для современных веб-браузеров
Обновлено: Команда protovis перешла в другую библиотеку под названием d3.js (Data Driven Documents), как они сказали:
«Команда Protovis сейчас разрабатывает новую библиотеку визуализации, D3.js, с улучшенной поддержкой анимации и взаимодействия. D3 основывается на многих концепциях Protovis».
Новую библиотеку теперь можно найти в:
http://mbostock.github.com/d3/
ОБНОВЛЕНИЕ 2:
«Рикша» - это набор инструментов JavaScript для создания интерактивных графиков временных рядов. Основан на d3.js, что значительно упрощает работу с d3.js, хотя и немного менее мощный.
http://code.shutterstock.com/rickshaw/
Беглый взгляд, я не думаю, что D3 «заменяет» Protovis. Я бы сказал, что команда «пошла дальше», потому что они видят в этом более интересный и современный.
Sencha приобрела Raphael, и теперь их диаграммы представляют собой чистый javascript, начиная с версии 4. Упомянутые выше Emprise и HighCharts - мои два фаворита.
Для более необычных графиков: http://thejit.org/
Проверьте ZingChart HTML5 Canvas, SVG, VML и Flash-диаграммы. Очень мощная и совместимая библиотека. Я в команде Zing - упомяните нас в твиттере @zingchart или задавайте вопросы по [email protected].
Недавно я искал библиотеку диаграмм javascript и оценил целую кучу, прежде чем, наконец, остановился на jqplot, который очень хорошо соответствует моим требованиям. Как упоминалось в ответе Жана Винсента, вы действительно выбираете между решением на основе холста и svg.
На мой взгляд, основные плюсы и минусы заключались в следующем. Решения на основе SVG, такие как Рафаэль (и ответвления), отлично подходят, если вы хотите создавать высокодинамичные / интерактивные диаграммы. Или если ваши требования к диаграммам сильно выходят за рамки нормы (например, вы хотите создать какую-то гибридную диаграмму или придумали новую визуализацию, о которой еще никто не подумал). Обратной стороной является кривая обучения и объем кода, который вам придется написать. Вы не будете строить диаграммы за несколько минут, будьте готовы потратить немного времени на обучение, а затем написать большой объем кода для создания относительно простой диаграммы.
Если ваши требования к диаграммам достаточно стандартны, например вам нужны линейные или гистограммы или, возможно, круговая диаграмма или две с ограниченной интерактивностью, тогда стоит взглянуть на решения на основе холста. Практически не будет никакой кривой обучения, вы сможете получить базовые диаграммы в течение нескольких минут, вам не нужно будет писать много кода, несколько строк базового javascript / jquery будут всем, что вам нужно. Конечно, вы сможете создавать только определенные типы диаграмм, которые поддерживает библиотека, обычно ограниченные различными видами линий, столбцов, круговых диаграмм. Выбор интерактивности будет чрезвычайно ограничен, то есть не будет существовать для многих библиотек, хотя некоторые ограниченные эффекты зависания возможны с лучшими из них.
Я выбрал JQplot, который представляет собой решение на основе холста, поскольку мне действительно нужны были только некоторые стандартные типы диаграмм. Из своего исследования и экспериментирования с различными вариантами я обнаружил, что он достаточно полнофункциональный (если вам нужны только стандартные диаграммы) и чрезвычайно прост в использовании, поэтому я бы порекомендовал его, если ваши требования аналогичны.
Подводя итог, простые и нужные диаграммы сейчас, а затем переходите к JQplot. Сложный / разный и не ограниченный во времени, тогда отправляйтесь с Рафаэлем и друзьями.
http://code.google.com/apis/visualization/documentation/gallery.html
Имеет очень интересные интерактивные возможности, включая карты, датчики и диаграммы.
Другой - RGraph: диаграммы и библиотека графиков Javascript:
На основе холста, так что это быстро, и есть примерно 20 различных типов диаграмм. Это бесплатно и для некоммерческого использования!
Могу порекомендовать Аркадия. Совершенно новая профессиональная библиотека графиков для JavaScript и GWT. Работает во всех браузерах без плагинов. Легко и быстро в использовании: создает великолепно выглядящие диаграммы с помощью всего нескольких строк кода. Бесплатно для некоммерческого использования.
Я играл с этим и заметил, что на веб-сайте нет возможности получить коммерческую лицензию. Фактически, на веб-сайте неясно, бесплатно это или нет.
Ты прав. Веб-сайт был обновлен, так что теперь вы можете легко узнать, какая коммерческая лицензия соответствует вашим требованиям: Аркадия.
Диаграммы Fusion имеет новую библиотеку javascript / jquery, которая выглядит многообещающей.
Если вам нужна только гистограмма. Я опубликовал код, который использовал в старом проекте. Кто-то сказал мне, что реализация VML не работает в последних версиях IE, но SVG должен работать нормально. Возможно, мы вернемся к проекту и выпустим несколько серверных модулей визуализации, которые у меня уже есть, и, возможно, слой визуализации WebGL. Там ссылка: http://blog.conquex.com/?p=64
Мы только что купили лицензию Пакет диаграмм TechOctave для нашего нового стартапа. Я их очень рекомендую. Лицензирование просто. Графики выглядят великолепно! Начать работу было легко, и у нас есть мощный API на тот случай, когда он нам понадобится. Я был шокирован тем, насколько чистый и расширяемый код. Действительно доволен своим выбором.
Вероятно, это не то, что ищет OP, но поскольку этот вопрос стал списком опций библиотеки JS-диаграмм: Спарклайны jQuery действительно круто.
В качестве позднего ответа попробуйте d3.js
http://mbostock.github.com/d3/
Продолжение protovis.
Большая разница с flot заключается в количестве поддерживаемых функций.
Хотя flot может быть проще, d3.js определенно более мощный.
Это та же библиотека, которую Джефф Далгас использовал для создания графа репутации здесь, в StackOverflow. Это действительно хороший комплект.