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


223

Хто-небудь порекомендував би конкретну бібліотеку графіків JavaScript - конкретно ту, яка взагалі не використовує Flash?

Відповіді:


160

Зростає кількість відкритих комерційних та комерційних рішень для чистого діаграми JavaScript, для якого не потрібен Flash. У цій відповіді я представлю лише варіанти з відкритим кодом.

Є 2 основні класи JavaScript-рішень для графіки, які не потребують Flash:

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

Є плюси і мінуси обох підходів, але для бібліотеки графіків я рекомендував би пізніше, оскільки він добре інтегрований з DOM, що дозволяє маніпулювати елементами діаграм з DOM, а головне встановлювати події DOM. На відміну від цього, бібліотеки графіків Canvas повинні винаходити колесо DOM для управління подіями. Тому, якщо ви не збираєтеся створювати статичні графіки без обробки подій, рішення SVG / VML повинні бути кращими.

Для рішень SVG / VML існує багато варіантів, включаючи:

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

Існує ряд бібліотек графіків на основі Рафаеля, включаючи (але не обмежуючись ними):

  • gRaphael , розширення графічної бібліотеки Рафаеля
  • Ico , з інтуїтивно зрозумілим API на основі єдиного виклику функції для створення складних діаграм

Розкриття: Я розробник одного з вил Ico на github .


5
Графіко і Іко - два несумісні вилки початкового Іко від Алекса Янга. Тож не точно стверджувати, що Іко став Графіко. Графіко є лише одним з вил.
Жан Вінсент

Слід зазначити, що Рафаель, здається, більше не підтримується. Останнє зобов’язання було липень 2010 року.
Аластер Піттс

1
Щойно завантажили рафаельські діаграми, їх сподобалось багато, але ніяких документів, щоб попередити.
Орбіта

@Alastair: Рафаель зараз спонсорується та розвивається Sencha ... або так кажуть :)
Roy Tinker

1
SVG не підтримується в попередній стільниковій системі Android. Якщо можливість перегляду діаграм на широкому діапазоні сучасних пристроїв Android є необхідною умовою, вам доведеться вибрати рішення на основі полотна. У цій статті про діаграми Sencha Touch розглядаються детальніше про графіки на мобільних пристроях загалом, і чому 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

Мені також подобається флот, раніше я користувався цим у багатьох веб-програмах.
fedmich

1
Мені подобається флот взагалі, але він хоче, щоб усі дані були цифрами, тому якщо ви хочете побудувати щось на зразок продажів на клієнта (за іменем) або за товар, це не вийде
Zachary K

60

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

Highcharts - бібліотека графіків, написана в чистому JavaScript, що пропонує простий спосіб додавання інтерактивних діаграм на ваш веб-сайт або веб-додаток. В даний час Highcharts підтримує типи ліній, сплайну, площі, областей, колонки, смуги, пирога та діаграми розсіювання


12
Варто зазначити, що ця бібліотека безкоштовна для некомерційного використання, але коштує грошей для односайтових та багатосайтових сайтів. Однак це здається досить розумною ціною.
Нік Спейпк

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

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

1
Ще один голос за Highcharts. Я зараз його використовую, і це чудово. Підтримує jQuery, Mootools та Prototype, і це дуже просто в налаштуванні та використанні.
gnclmorais

1
StackOverflow себе використовує Highcharts 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

Мені потрібно зробити свічник горизонтального типу, хтось знає, чи можливо це з діаграмою goigle api?
Том Стікель

15

Є ще одна бібліотека javascript на базі SVG. Він називається Protovis і походить від Stanford Visualization Group

Це також дозволяє робити приємну інтерактивну графіку та візуалізацію.

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

Хоча це лише для сучасних веб-браузерів

ОНОВЛЕННЯ: Команда protovis перейшла до іншої бібліотеки під назвою d3.js (Документи, керовані даними), як вони сказали:

"Команда 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, який дуже добре відповідає моїм вимогам. Як згадується у відповіді Жана Вінсента, ви дійсно обираєте рішення на основі полотна та на основі svg.

На мій погляд, основні плюси і мінуси полягали в наступному. Рішення на основі SVG, такі як Рафаель (і офшоу), чудові, якщо ви хочете створити високодинамічні / інтерактивні діаграми. Або якщо вимоги до графіків виходять за рамки норми (наприклад, ви хочете створити якусь гібридну діаграму або ви придумали нову візуалізацію, про яку ще ніхто не думав). Мінусом є крива навчання та кількість коду, який вам доведеться написати. За кілька хвилин ви не будете вибивати графіки, будьте готові вкласти деякий реальний час навчання, а потім написати непогано кількість коду, щоб створити порівняно просту діаграму.

Якщо ваші вимоги до графіків досить стандартні, наприклад, ви хочете отримати рядкові або смугові діаграми або, можливо, кругову діаграму чи дві, з обмеженою інтерактивністю, тоді варто переглянути рішення на основі полотна. Навряд чи буде крива навчання, ви зможете отримувати основні графіки протягом декількох хвилин, вам не потрібно буде писати багато коду, кілька рядків базового 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, де ви можете генерувати діаграми, передаючи дані запиту в їх веб-службу.






0

Я можу порекомендувати ArcadiaCharts . Зовсім нова професійна бібліотека графіків для JavaScript та GWT. Працює у всіх браузерах без плагінів. Простий і швидкий у використанні: створює чудові діаграми з лише кількома рядками коду. Безкоштовно для некомерційного використання.


Я грав із цим, і помітив, що немає можливості отримати комерційну ліцензію на веб-сайті. Насправді веб-сайту не зрозуміло, безкоштовне це чи ні.
zumalifeguard

Ти правий. Веб-сайт був оновлений, і тепер ви зможете легко дізнатися, яка комерційна ліцензія відповідає вашим вимогам: ArcadiaCharts .
Hoang-Tran Vo


0

У випадку, якщо вам потрібно, це лише гістограма. Я опублікував якийсь код, який я використовував у старому проекті. Хтось сказав мені, що реалізація VML зламана на останніх версіях IE, але SVG повинен працювати просто чудово. Можливо, повернуться до проекту та випустять декілька серверів, які у мене вже є, і, можливо, шар візуалізації WebGL. Там посилання: http://blog.conquex.com/?p=64


0

Напевно, не те, що шукає ОП, але оскільки це питання стало списком параметрів бібліотеки графіків JS: jQuery Sparklines - це дуже цікаво.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.