JavaScript Chart Library


223

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

Ответы:


160

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

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

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

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

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

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

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

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

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


5
Графика и Ико - две несовместимые вилки первоначального Ико Алекса Янга. Так что нельзя утверждать, что Ico стала Grafico. Графико - это только одна из вилок.
Жан Винсент

Следует отметить, что Рафаэль, похоже, больше не поддерживается. Последний коммит был июль 2010 года или около того.
Аластер Питтс

1
Просто скачал диаграммы Рафаэля, очень понравился, но без документов, просто чтобы предупредить.
Орбита

@Alastair: Рафаэль теперь спонсируется и разрабатывается Сенчей ... или так они говорят :)
Рой Тинкер

1
SVG не поддерживается в предварительной версии Android сота. Если вам требуется возможность просматривать графики на самых разных устройствах Android, вам нужно выбрать решение на основе Canvas. В этой статье о сенсорных диаграммах Sencha более подробно рассказывается о мобильных графиках в целом и о том, почему Sencha Touch пошел по пути Canvas.
Паллави Андерсон

70

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

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


2
Это та же библиотека, что и Джефф Далгаз, для создания графа репутации здесь, в StackOverflow. Это действительно хороший набор.
Чарльз Ропер

Моя единственная реальная жалоба на flot заключается в том, что при рендеринге в IE он выглядит ужасно при любом уровне масштабирования, кроме 100% (т.е. все линии / блоки не масштабируются вместе - это определенно проблема для тех из нас, кто использует дисплеи с высоким разрешением).
Bittercoder

2
Похоже, флот-графики выглядят лучше, чем многие другие, на которые я смотрел. Вот ссылка на 20 библиотек JavaScript-диаграмм: javascript.open-libraries.com/utilities/chart/…
B 7

Мне тоже нравится flot, я уже много раз использовал это в разных веб-приложениях.
fedmich

1
Мне вообще нравится flot, но он хочет, чтобы все данные были числами, поэтому, если вы хотите изобразить что-то вроде продаж по покупателю (по имени) или по продукту, это не сработает
Захари К

60

Проверьте http://www.highcharts.com !

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


12
Стоит отметить, что эта библиотека бесплатна для некоммерческого использования, но стоит денег для одиночных и мульти-сайтов. Похоже, довольно разумная цена.
Ник Спейсек

Сначала это как бесстыдная вилка, но они выглядят действительно потрясающе! Это не бесплатно для коммерческого использования, хотя, у меня нет никаких ссылок, является ли цена разумной или нет, но они выглядят хорошо с первого взгляда!
Труфа

Это та же самая библиотека графиков, которая используется в CloudFlare.com, и выглядит она действительно великолепно. Я собирался использовать библиотеку диаграмм DevExpress, которая является ASP.NET и рендерит и изображение на сервере, когда наткнулся на библиотеку highcharts. Я сразу убедился, что это путь. Когда я узнал, что CloudFlare, у которого есть одна из самых привлекательных информационных панелей / аналитик из всех, что я когда-либо видел, тоже использует ее, я был продан! В настоящее время я экспериментирую с ним, и это сработало в моей первой попытке встроить диаграмму в мою веб-страницу ... так что это тоже кажется простым в использовании!
Loudenvier

1
Еще один голос за Highcharts. Я в настоящее время использую это, и это здорово. Поддерживает jQuery, Mootools и Prototype, и его очень легко установить и использовать.
gnclmorais

1
Сам Stackoverflow использует старшие графики stackoverflow.com/users/22656/jon-skeet?tab=reputation
Скотт

36

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


16
это не javascript
user102008

5
только помните, Google Chart требует подключения к интернету, а также имеет некоторые ограничения на количество разрешенных клиентских запросов
fedmich

@ user102008: это сейчас :) (Вы все еще можете получить доступ к старому API на основе изображений, если хотите)
Spycho

API Google Chart нельзя использовать в автономном режиме, что плохо для разработки мобильных приложений.
oldwizard

Мне нужно сделать подсвечник горизонтального типа, кто-нибудь знает, возможно ли это с помощью Google Graph API?
Том Стиккель

15

Существует еще одна библиотека 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, хотя и немного менее мощно.

http://code.shutterstock.com/rickshaw/


Я не думаю, что D3 "заменяет" Protovis. Я бы сказал, что команда «продвинулась», потому что они считают это более интересным и передовым.
Дэвид Дж.

14

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

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

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

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

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


14

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


Я тоже так думаю после некоторых исследований. Прямо сейчас это выглядит как одна из лучших доступных библиотек диаграмм JS.
Jturcotte

4

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

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




3

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

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


1
просто хочу сказать, что для этой библиотеки нет документов, хотя это очень приятно.
Орбита


3

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

http://www.rgraph.net

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


2

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

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





2

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



1

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






0

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


Я играл с этим и заметил, что на веб-сайте нет возможности получить коммерческую лицензию. На самом деле, веб-сайт не ясно, является ли это бесплатным или нет.
zumalifeguard

Ты прав. Веб-сайт был обновлен, так что теперь вы можете легко узнать, какая коммерческая лицензия соответствует вашим требованиям: ArcadiaCharts .
Хоанг-Тран Во


0

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


0

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.