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

Кто-нибудь может порекомендовать конкретную библиотеку графиков JavaScript - в частности, такую, которая вообще не использует флеш?

ОТВЕТЫ

Ответ 1

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

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

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

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

Для решений SVG/VML существует множество опций, в том числе:

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

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

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

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

Ответ 2

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

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

Ответ 3

Отъезд http://www.highcharts.com!

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

Ответ 5

Существует еще одна библиотека javascript, основанная на SVG. Он называется Protovis, и он исходит из группы Visual Studio Visual Studio

Он также позволяет делать приятную интерактивную графику и визуализацию.

http://vis.stanford.edu/protovis/ex/

Хотя это только для современных веб-браузеров

UPDATE: Команда протовиков перешла в другую библиотеку под названием 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/

Ответ 6

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

Ответ 7

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

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

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

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

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

Ответ 8

Как какой-то поздний ответ, попробуйте d3.js
http://mbostock.github.com/d3/

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

Ответ 9

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

Ответ 10

Попробуйте PlotKit

Ответ 11

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

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

Ответ 13

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

http://www.rgraph.net

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

Ответ 15

Мой любимый (флот) уже упоминался.

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

Ответ 19

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

Ответ 20

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

Ответ 21

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

Ответ 22

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

http://www.sencha.com/

Ответ 24

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

Ответ 26

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

Ответ 27

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

Ответ 28

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

Ответ 29

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