Библиотека диаграмм JavaScript

Растет число решений с открытым исходным кодом и коммерческих решений для построения диаграмм на чистом JavaScript, не требующих Flash. В этом ответе я представлю только варианты с открытым исходным кодом.

Существует 2 основных класса решений JavaScript для графики, для которых не требуется Flash:

• На основе холста, визуализируется в IE с использованием ExplorerCanvas, который, в свою очередь, полагается на VML.
• SVG в стандартных браузерах, отображаемый как VML в IE

У обоих подходов есть свои плюсы и минусы, но для библиотеки диаграмм я бы порекомендовал второй, потому что он хорошо интегрирован с DOM, позволяет манипулировать элементами диаграмм с помощью DOM и, что наиболее важно, настраивать события DOM. Библиотеки диаграмм Canvas, напротив, должны изобретать колесо DOM для управления событиями. Поэтому, если вы не собираетесь строить статические графики без обработки событий, решения SVG / VML должны быть лучше.

Для решений SVG / VML есть много вариантов, в том числе:

• Dojox Charting, хорошо, если вы используете Набор инструментов Dojo уже
• Решения на основе Raphael

Raphael - это очень активная, ухоженная и зрелая графическая библиотека с открытым исходным кодом и очень хорошей кросс-браузерной поддержкой, включая IE с 6 по 8, Firefox, Opera, Safari, Chrome и Konqueror. Raphael не зависит от какой-либо инфраструктуры JavaScript и поэтому может использоваться с Prototype, jQuery, Dojo, Mootools и т. Д.

Существует ряд графических библиотек, основанных на Рафаэле, включая (но не ограничиваясь ими):

• gRaphael, расширение графической библиотеки Рафаэля
• Ico с интуитивно понятным API, основанным на одном вызове функции для создания сложных диаграмм

Раскрытие информации: я разработчик одного из форков Ico на github.

Если вы используете jQuery, я считаю, что flot очень хорош - попробуйте примеры, чтобы узнать, подходят ли они вашим потребностям, но я нашел, что они подходят большая часть того, что мне нужно для моего текущего проекта.

Кроме того, ExtJS 4.0 представил отличный набор диаграмм - очень мощный , и предназначен для работы с оперативными данными.

Посетите http://www.highcharts.com!

Highcharts - это библиотека диаграмм, написанная на чистом JavaScript, предлагающая простой способ добавления интерактивных диаграмм на ваш веб-сайт или веб-приложение. Highcharts в настоящее время поддерживает типы линейных, сплайновых, площадных, линейных, столбчатых, линейных, круговых и точечных диаграмм.

Возможно, это не совсем то, что вы ищете, но
Google Chart API довольно круто и легко использовать.

Есть еще одна библиотека 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/

Недавно я искал библиотеку диаграмм javascript и оценил целую кучу, прежде чем, наконец, остановился на jqplot, который соответствует моим требованиям. очень хорошо. Как упоминалось в ответе Жана Винсента, вы действительно выбираете между решением на основе холста и svg.

На мой взгляд, основные плюсы и минусы заключаются в следующем. Решения на основе SVG, такие как Raphael (и его ответвления), отлично подходят, если вы хотите создавать высокодинамичные / интерактивные диаграммы. Или если ваши требования к диаграммам сильно выходят за рамки нормы (например, вы хотите создать какую-то гибридную диаграмму или придумали новую визуализацию, о которой еще никто не подумал). Обратной стороной является кривая обучения и объем кода, который вам придется написать. Вы не будете строить диаграммы за несколько минут, будьте готовы потратить немного времени на обучение, а затем написать большой объем кода для создания относительно простой диаграммы.

Если ваши требования к диаграммам достаточно стандартны, например вам нужны линейные или гистограммы или, возможно, круговая диаграмма или две с ограниченной интерактивностью, тогда стоит взглянуть на решения на основе холста. Практически не будет никакой кривой обучения, вы сможете получить базовые диаграммы в течение нескольких минут, вам не нужно будет писать много кода, несколько строк базового javascript / jquery будут всем, что вам нужно. Конечно, вы сможете создавать только определенные типы диаграмм, которые поддерживает библиотека, обычно ограниченные различными видами линий, столбцов, круговых диаграмм. Варианты интерактивности будут чрезвычайно ограничены, то есть не будут существовать для многих библиотек, хотя некоторые ограниченные эффекты наведения возможны с лучшими из них.

Я выбрал JQplot, который представляет собой решение на основе холста, поскольку мне действительно нужны были только некоторые стандартные типы диаграмм. Из своего исследования и экспериментирования с различными вариантами я обнаружил, что он достаточно полнофункциональный (если вам нужны только стандартные диаграммы) и чрезвычайно прост в использовании, поэтому я бы порекомендовал его, если ваши требования аналогичны.

Подводя итог, простые и нужные диаграммы сейчас, а затем переходите к JQplot. Сложный / разный и не ограниченный во времени, тогда отправляйтесь с Рафаэлем и друзьями.

jqPlot великолепен. Если ваши требования довольно "нормальные" и вы просто хотите нарисовать несколько диаграмм, вы, вероятно, не справляетесь с количеством вариантов построения диаграмм в js. Предполагая, что вы не хотите часами заниматься исследованиями, просто используйте jqPlot, поскольку это, вероятно, ваш лучший выбор. Он хорошо охватывает большинство случаев использования для большинства людей. Некоторые из альтернатив специализируются на определенном типе диаграмм или построены с учетом определенного варианта использования.

В качестве позднего ответа попробуйте d3.js
http://mbostock.github.com/d3/

Это продолжение protovis.
Большая разница с flot заключается в количестве поддерживаемых функций.
Хотя flot может быть проще, d3.js определенно более мощный.

Flotr - это еще одна, чистая библиотека диаграмм Javascript, основанная на Prototype и вдохновленная Флот

Попробуйте PlotKit

Я бы порекомендовал gRaphaël для построения диаграмм на чистом JavaScript вместе с библиотекой векторной графики на чистом JavaScript, на которой он построен (Raphaël).

В настоящее время gRaphaël поддерживает Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

• фреймворк: http://www.simile-widgets.org/

базовый: http://www.filamentgroup.com/examples/charting_v2/index_2.php < / а>

хорошо выглядит: http://www.highcharts.com/

Другой - RGraph: диаграммы и библиотека графиков Javascript:

http://www.rgraph.net

На основе Canvas, так что это быстро, и есть примерно 20 различных типов диаграмм. Это бесплатно и для некоммерческого использования!

Мой фаворит (флот) уже упоминался.

Но обязательно изучите Ortho. Он отлично подходит для древовидных диаграмм и временных шкал.

В библиотеке диаграмм dojo много активности, и, что замечательно, я тоже без проблем использую ее в приложении AIR, довольно круто! См., Например, здесь http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

Ознакомьтесь с API визуализации Google, который является своего рода обобщением более простого API диаграмм

http://code.google.com/apis/visualization/documentation/gallery.html

Имеет очень интересные интерактивные возможности, включая карты, датчики и диаграммы.

Мы только что купили лицензию на TechOctave Charts Suite для нашего нового стартапа. Я их очень рекомендую. Лицензирование просто. Графики выглядят великолепно! Начать работу было легко, и у нас есть мощный API на тот случай, когда он нам понадобится. Я был шокирован тем, насколько чистый и расширяемый код. Действительно доволен своим выбором.

Попробуйте временную шкалу MIT simile, которую можно превратить в диаграмму - http://simile.mit.edu/timeline/

или последний, http://code.google.com/p/gchart/

Это не библиотека Javascript, но она может быть подходящей альтернативой - посмотрите Google Charts, где вы можете генерировать диаграммы, передавая данные строки запроса в их веб-службу.

Взгляните на Bluff. Это порт JavaScript графической библиотеки Gruff для Ruby.

Protochart - это все, что вам нужно

Sencha приобрела Raphael, и теперь их диаграммы представляют собой чистый javascript, начиная с версии 4. Упомянутые выше Emprise и HighCharts - мои два фаворита.

http://www.sencha.com/

Для более необычных диаграмм: http://thejit.org/

Я могу порекомендовать ArcadiaCharts. Совершенно новая профессиональная библиотека графиков для JavaScript и GWT. Работает во всех браузерах без плагинов. Легко и быстро в использовании: создает великолепно выглядящие диаграммы с помощью всего нескольких строк кода. Бесплатно для некоммерческого использования.

Fusion charts содержит новую библиотеку javascript / jquery, которая выглядит многообещающей.

Если вам нужна только гистограмма. Я опубликовал код, который использовал в старом проекте. Кто-то сказал мне, что реализация VML не работает в последних версиях IE, но SVG должен работать нормально. Возможно, вернусь к проекту и выпустим несколько серверных рендереров, которые у меня уже есть, и, возможно, слой рендеринга WebGL. Есть ссылка: http://blog.conquex.com/?p=64

Вероятно, это не то, что ищет OP, но поскольку этот вопрос стал списком вариантов библиотеки диаграмм JS: jQuery Sparklines действительно круто.

Ознакомьтесь с ZingChart HTML5 Canvas, SVG, VML и Flash-диаграммами. Очень мощная и совместимая библиотека. Я в команде Zing - упомяните нас в Twitter @zingchart или отправьте любые вопросы по адресу [email protected].