Ответы:
Растет число открытых и коммерческих решений для построения чистых JavaScript-диаграмм, не требующих Flash. В этом ответе я представлю только варианты с открытым исходным кодом.
Существует 2 основных класса JavaScript-решений для графики, не требующих Flash:
У обоих подходов есть свои плюсы и минусы, но для библиотеки графиков я бы порекомендовал более позднюю, поскольку она хорошо интегрирована с DOM, позволяя манипулировать элементами диаграмм с помощью DOM и, что наиболее важно, настраивать события DOM. Библиотеки графиков Canvas, напротив, должны заново изобретать колесо DOM для управления событиями. Поэтому, если вы не собираетесь строить статические графы без обработки событий, решения SVG / VML должны быть лучше.
Для решений SVG / VML существует множество вариантов, в том числе:
Raphael - очень активная, ухоженная и зрелая графическая библиотека с открытым исходным кодом, с очень хорошей кросс-браузерной поддержкой, включая IE 6-8, Firefox, Opera, Safari, Chrome и Konqueror. Raphael не зависит от какой-либо среды JavaScript и поэтому может использоваться с Prototype, jQuery, Dojo, Mootools и т. Д.
Существует множество библиотек диаграмм, основанных на Рафаэле, включая (но не ограничиваясь ими):
Раскрытие информации: я являюсь разработчиком одной из вилок Ico на github .
Если вы используете jQuery, я считаю, что flot очень хорош - попробуйте примеры, чтобы увидеть, соответствуют ли они вашим потребностям, но я обнаружил, что они делают большую часть того, что мне нужно для моего текущего проекта.
Кроме того, в ExtJS 4.0 представлен большой набор диаграмм - очень мощных, предназначенных для работы с живыми данными.
Проверьте http://www.highcharts.com !
Highcharts - это библиотека диаграмм, написанная на чистом JavaScript, предлагающая простой способ добавления интерактивных диаграмм на ваш веб-сайт или веб-приложение. Highcharts в настоящее время поддерживает типы линий, сплайнов, площадей, областей, столбцов, столбчатых, круговых и точечных диаграмм.
Это может быть не совсем то, что вы ищете, но
Google Chart API довольно крутой и простой в использовании.
Существует еще одна библиотека JavaScript, основанная на SVG. Это называется Protovis, и это происходит из Stanford Visualization Group
Это также позволяет создавать приятную интерактивную графику и визуализации.
http://vis.stanford.edu/protovis/ex/
Хотя это только для современных веб-браузеров
ОБНОВЛЕНИЕ: команда разработчиков Provisis перешла в другую библиотеку d3.js (Data Driven Documents), как они сказали:
«Команда Protovis сейчас разрабатывает новую библиотеку визуализации, D3.js, с улучшенной поддержкой анимации и взаимодействия. D3 опирается на многие концепции Protovis»
Новая библиотека теперь может быть найдена в:
http://mbostock.github.com/d3/
ОБНОВЛЕНИЕ 2:
«Рикша» - это JavaScript-инструментарий для создания интерактивных графиков временных рядов. Основан на d3.js, что значительно упрощает работу с d3.js, хотя и немного менее мощно.
Недавно я искал библиотеку диаграмм javascript и оценил целую кучу, прежде чем окончательно остановился на jqplot, который очень хорошо соответствовал моим требованиям. Как отметил ответ Жана Винсента, вы действительно выбираете между решениями на основе canvas и svg.
На мой взгляд, основные плюсы и минусы были следующие. Решения на основе SVG, такие как Raphael (и ответвления), хороши, если вы хотите создавать высокодинамичные / интерактивные диаграммы. Или если ваши требования к диаграммам сильно выходят за рамки нормы (например, вы хотите создать какую-то гибридную диаграмму или у вас есть новая визуализация, о которой еще никто не думал). Недостатком является кривая обучения и объем кода, который вам придется написать. Вы не будете раскручивать графики в течение нескольких минут, будьте готовы потратить немного реального времени на обучение, а затем написать много кода для создания относительно простой диаграммы.
Если ваши требования к диаграммам достаточно стандартны, например, вам нужны линейные или гистограммы или, возможно, круговая диаграмма или две, с ограниченной интерактивностью, то стоит взглянуть на решения на основе холста. Практически не будет никакой кривой обучения, вы сможете получить базовые графики за несколько минут, вам не нужно будет писать много кода, всего несколько строк базового javascript / jquery будут вам нужны. Конечно, вы сможете создавать только те типы диаграмм, которые поддерживаются библиотекой, обычно ограниченные различными видами линий, столбцов, круговых диаграмм. Выбор интерактивности будет чрезвычайно ограничен, то есть не существует во многих библиотеках, хотя некоторые лучшие эффекты при наведении возможны.
Я пошел с JQplot, который является решением на основе холста, так как мне действительно нужны были только некоторые стандартные типы диаграмм. Из моих исследований и изучения различных вариантов я обнаружил, что он достаточно полнофункциональный (если вы только после стандартных диаграмм) и чрезвычайно прост в использовании, поэтому я рекомендую его, если ваши требования аналогичны.
Подводя итог, просто и хотите графики сейчас, а затем идти с JQplot. Сложный / разный и не тянущий время, тогда иди с Рафаэлем и друзьями.
jqPlot отлично. Если ваши требования довольно «нормальны» и вы просто хотите нарисовать некоторые диаграммы, вы, вероятно, ошеломлены количеством опций построения диаграмм js. Предполагая, что вы не хотите проводить часы исследований, просто используйте jqPlot, поскольку это, вероятно, ваш лучший выбор. Он охватывает большинство случаев использования для большинства людей хорошо. Некоторые из альтернатив специализируются на графике определенного типа или построены с учетом конкретного варианта использования.
Как какой-то поздний ответ, попробуйте d3.js
http://mbostock.github.com/d3/
Это продолжение протовиса.
Большая разница во флоте заключается в количестве поддерживаемых функций.
Хотя flot может быть проще, d3.js определенно более мощный.
Попробуйте PlotKit
Я бы порекомендовал gRaphaël для диаграмм на чистом JavaScript вместе с библиотекой векторной графики на чистом JavaScript ( Raphaël ).
В настоящее время gRaphaël поддерживает Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.
базовый: http://www.filamentgroup.com/examples/charting_v2/index_2.php
хорошо выглядит: http://www.highcharts.com/
Другой - RGraph: диаграммы Javascript и библиотека графиков:
На основе холста, так что это быстро, и есть около 20 различных типов диаграмм Это бесплатно для некоммерческого использования тоже!
Мой любимый (флот) уже упоминался.
Но не забудьте исследовать Орто . Это отлично подходит для древовидных диаграмм и графиков.
В библиотеке диаграмм dojo много активности, и что здорово, я использую ее в приложении AIR тоже без проблем, довольно круто! Смотрите, например, там http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Посмотрите Google Visualization API , который является своего рода обобщением более простого Chart API
http://code.google.com/apis/visualization/documentation/gallery.html
Имеет очень крутые интерактивные опции, включая карты, датчики и графики.
Мы только что купили лицензию TechOctave Charts Suite для нашего нового стартапа. Я очень рекомендую их. Лицензирование просто. Графики выглядят великолепно! Начать было легко, и у него был мощный API, когда он нам нужен. Я был шокирован тем, насколько чист и расширяем код. Действительно доволен нашим выбором.
Попробуйте временную шкалу сравнения MIT, которую можно превратить в диаграмму - http://simile.mit.edu/timeline/
или последний, http://code.google.com/p/gchart/
Не библиотека Javascript, но она может быть подходящей альтернативой - посмотрите Google Charts, где вы можете создавать диаграммы, передавая данные строки запроса в их веб-сервис.
Посмотрите на Блеф . Это порт JavaScript графической библиотеки Gruff для Ruby.
Protochart это все что вам нужно
Сенча приобрел Рафаэля, и теперь их диаграммы - чистый javascript начиная с версии 4. Упомянутые выше Emprise и HighCharts - мои два фаворита.
Для более необычных графиков: 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 - упомяните нас в твиттере @zingchart или задайте любые вопросы на support@zingchart.com.