JavaScript-Diagrammbibliothek

Würde jemand eine bestimmte JavaScript-Diagrammbibliothek empfehlen - insbesondere eine, die überhaupt kein Flash verwendet?

Es gibt eine wachsende Anzahl von Open Source- und kommerziellen Lösungen für reine JavaScript-Diagramme, für die kein Flash erforderlich ist. In dieser Antwort werde ich nur Open Source-Optionen vorstellen.

Es gibt zwei Hauptklassen von JavaScript-Lösungen für Grafiken, für die kein Flash erforderlich ist:

• Canvas-basiert, im IE mit ExplorerCanvas gerendert, der wiederum auf VML basiert
• SVG in standardbasierten Browsern, im IE als VML gerendert

Beide Ansätze haben Vor- und Nachteile, aber für eine Diagrammbibliothek würde ich das spätere empfehlen, da es gut in DOM integriert ist, Diagrammelemente mit dem DOM bearbeiten und vor allem DOM-Ereignisse festlegen kann. Im Gegensatz dazu müssen Canvas-Diagrammbibliotheken das DOM-Rad neu erfinden, um Ereignisse zu verwalten. Wenn Sie also nicht beabsichtigen, statische Diagramme ohne Ereignisbehandlung zu erstellen, sollten SVG / VML-Lösungen besser sein.

Für SVG / VML-Lösungen gibt es viele Optionen, darunter:

• Dojox Charting , gut, wenn Sie das Dojo-Toolkit bereits verwenden
• Raphael- basierte Lösungen

Raphael ist eine sehr aktive, gut gepflegte und ausgereifte Open-Source-Grafikbibliothek mit sehr guter browserübergreifender Unterstützung, einschließlich IE 6 bis 8, Firefox, Opera, Safari, Chrome und Konqueror. Raphael ist von keinem JavaScript-Framework abhängig und kann daher mit Prototype, jQuery, Dojo, Mootools usw. verwendet werden.

Es gibt eine Reihe von Diagrammbibliotheken, die auf Raphael basieren, einschließlich (aber nicht beschränkt auf):

• gRaphael , eine Erweiterung der Raphael-Grafikbibliothek
• Ico mit einer intuitiven API, die auf einem einzelnen Funktionsaufruf basiert, um komplexe Diagramme zu erstellen

Offenlegung: Ich bin der Entwickler einer der Ico-Gabeln auf Github .

Wenn Sie jQuery verwenden, habe ich festgestellt, dass Flot sehr gut ist. Probieren Sie die Beispiele aus , um festzustellen, ob sie Ihren Anforderungen entsprechen. Ich habe jedoch festgestellt, dass sie das meiste tun, was ich für mein aktuelles Projekt benötige.

zusätzlich ExtJS 4.0 eine große Anzahl von Diagrammen eingeführt - sehr leistungsfähig und für die Arbeit mit Live-Daten ausgelegt.

Schauen Sie sich http://www.highcharts.com an !

Highcharts ist eine in reinem JavaScript geschriebene Diagrammbibliothek, mit der Sie Ihrer Website oder Webanwendung auf einfache Weise interaktive Diagramme hinzufügen können. Highcharts unterstützen derzeit Linien-, Spline-, Flächen-, Flächenlinien-, Spalten-, Balken-, Kreis- und Streudiagrammtypen.

Es ist vielleicht nicht genau das, wonach Sie suchen, aber
die Chart-API von Google ist ziemlich cool und einfach zu bedienen.

Es gibt eine weitere Javascript-Bibliothek, die auf SVG basiert. Es heißt Protovis und stammt von der Stanford Visualization Group

Es ermöglicht auch schöne interaktive Grafiken und Visualisierungen.

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

Obwohl es nur für moderne Webbrowser ist

UPDATE: Das protovis-Team ist in eine andere Bibliothek namens d3.js (Data Driven Documents) umgezogen.

"Das Protovis-Team entwickelt derzeit eine neue Visualisierungsbibliothek, D3.js, mit verbesserter Unterstützung für Animation und Interaktion. D3 baut auf vielen Konzepten in Protovis auf."

Die neue Bibliothek finden Sie jetzt in:

http://mbostock.github.com/d3/

UPDATE 2:

"Rickshaw" ist ein JavaScript-Toolkit zum Erstellen interaktiver Zeitreihendiagramme. Basierend auf d3.js vereinfacht dies die Arbeit mit d3.js erheblich, ist jedoch etwas weniger leistungsfähig.

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

Ich habe vor kurzem nach einer Javascript-Diagrammbibliothek gesucht und eine ganze Reihe ausgewertet, bevor ich mich schließlich für jqplot entschieden habe, das meinen Anforderungen sehr gut entspricht. Wie in der Antwort von Jean Vincent erwähnt, wählen Sie wirklich zwischen einer Canvas-basierten und einer SVG-basierten Lösung.

Meiner Meinung nach waren die wichtigsten Vor- und Nachteile wie folgt. Die SVG-basierten Lösungen wie Raphael (und Ableger) eignen sich hervorragend, wenn Sie hochdynamische / interaktive Diagramme erstellen möchten. Oder wenn Ihre Diagrammanforderungen weit außerhalb der Norm liegen (z. B. wenn Sie eine Art Hybriddiagramm erstellen möchten oder eine neue Visualisierung entwickelt haben, an die noch niemand gedacht hat). Der Nachteil ist die Lernkurve und die Menge an Code, die Sie schreiben müssen. Sie werden in wenigen Minuten keine Diagramme mehr erstellen, keine echte Lernzeit investieren und dann eine gute Menge Code schreiben, um ein relativ einfaches Diagramm zu erstellen.

Wenn Ihre Diagrammanforderungen einigermaßen Standard sind, z. B. einige Linien- oder Balkendiagramme oder vielleicht ein oder zwei Kreisdiagramme mit begrenzter Interaktivität, sollten Sie sich leinwandbasierte Lösungen ansehen. Es wird kaum eine Lernkurve geben, Sie werden in der Lage sein, grundlegende Diagramme innerhalb weniger Minuten zum Laufen zu bringen, Sie müssen nicht viel Code schreiben, ein paar Zeilen grundlegendes Javascript / JQuery sind alles, was Sie brauchen. Natürlich können Sie nur die von der Bibliothek unterstützten Diagrammtypen erstellen, die normalerweise auf verschiedene Arten von Linien, Balken und Torten beschränkt sind. Die Interaktivitätsoptionen sind äußerst begrenzt, dh für viele der Bibliotheken gibt es keine, obwohl mit den besseren einige begrenzte Hover-Effekte möglich sind.

Ich habe mich für JQplot entschieden, eine Canvas-basierte Lösung, da ich nur einige Standardtypen von Diagrammen wirklich brauchte. Aufgrund meiner Recherchen und des Herumspielens mit den verschiedenen Auswahlmöglichkeiten fand ich, dass es einigermaßen voll ausgestattet ist (wenn Sie nur nach den Standard-Charts suchen) und extrem einfach zu bedienen ist. Daher würde ich es empfehlen, wenn Ihre Anforderungen ähnlich sind.

Um es jetzt zusammenzufassen, einfach und wollen Sie Diagramme, dann gehen Sie mit JQplot. Komplex / anders und nicht unter Zeitdruck, dann geh mit Raphael und Freunden.

jqPlot ist großartig. Wenn Ihre Anforderungen ziemlich "normal" sind und Sie nur einige Diagramme zeichnen möchten, sind Sie wahrscheinlich von der Anzahl der js-Diagrammoptionen überwältigt. Angenommen, Sie möchten nicht stundenlang recherchieren, entscheiden Sie sich einfach für jqPlot, da dies wahrscheinlich die beste Wahl ist. Es deckt die meisten Anwendungsfälle für die meisten Menschen gut ab. Einige der Alternativen sind auf einen bestimmten Diagrammtyp spezialisiert oder wurden für einen bestimmten Anwendungsfall erstellt.

Versuchen Sie als eine Art späte Antwort d3.js
http://mbostock.github.com/d3/

Es ist die Fortsetzung von Protovis.
Der große Unterschied zum Flot liegt in der Anzahl der unterstützten Funktionen.
Obwohl Flot einfacher sein mag, ist d3.js definitiv mächtiger.

Flotr ist eine weitere reine Javascript-Diagrammbibliothek, die auf Prototype basiert und von Flot inspiriert ist

Probieren Sie PlotKit aus

Ich würde gRaphaël für reines JavaScript-Diagramm zusammen mit der reinen JavaScript-Vektorgrafikbibliothek empfehlen, auf der es basiert ( Raphaël ).

gRaphaël unterstützt derzeit Firefox 3.0+, Safari 3.0+, Opera 9.5+ und Internet Explorer 6.0+.

• ein Framework: http://www.simile-widgets.org/

eine grundlegende: http://www.filamentgroup.com/examples/charting_v2/index_2.php

gut aussehend: http://www.highcharts.com/

Ein anderes ist RGraph: Javascript-Diagramme und Diagrammbibliothek:

http://www.rgraph.net

Canvas-basiert, also schnell und es gibt ungefähr 20 verschiedene Diagrammtypen. Es ist auch für nichtkommerzielle Zwecke kostenlos!

Mein Favorit (Flot) wurde bereits erwähnt.

Aber seien Sie sicher, Ortho zu untersuchen . Es eignet sich hervorragend für Baumdiagramme und Zeitleisten.

In der Dojo-Diagrammbibliothek gibt es eine Menge Aktivitäten, und was großartig ist, ich verwende sie auch problemlos in einer AIR-Anwendung, ziemlich cool! Siehe zum Beispiel dort http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

Schauen Sie sich die Google Visualization API an , eine Art Verallgemeinerung der einfacheren Diagramm-API

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

Hat sehr coole interaktive Optionen wie Karten, Messgeräte und Diagramme.

Wir haben gerade eine Lizenz für die TechOctave Charts Suite für unser neues Startup gekauft. Ich kann sie nur empfehlen. Die Lizenzierung ist einfach. Charts sehen toll aus! Der Einstieg war einfach und verfügt über eine leistungsstarke API, wenn wir sie benötigen. Ich war schockiert, wie sauber und erweiterbar der Code ist. Wirklich zufrieden mit unserer Wahl.

Probieren Sie die MIT-Simile-Timeline aus, die in ein Diagramm umgewandelt werden kann. http://simile.mit.edu/timeline/

oder die letzte, http://code.google.com/p/gchart/

Keine Javascript-Bibliothek, aber möglicherweise eine geeignete Alternative. Schauen Sie sich Google Charts an, wo Sie Diagramme erstellen können, indem Sie Querystring-Daten an ihren Webdienst übergeben.

Schauen Sie sich Bluff an . Es ist ein JavaScript-Port der Gruff-Grafikbibliothek für Ruby.

Protochart ist alles was Sie brauchen

Sencha hat Raphael erworben und jetzt sind ihre Charts ab Version 4 reines Javascript. Emprise und HighCharts, die oben erwähnt wurden, sind meine beiden Favoriten.

http://www.sencha.com/

Für die ungewöhnlicheren Charts: http://thejit.org/

Ich kann ArcadiaCharts empfehlen . Eine brandneue professionelle Diagrammbibliothek für JavaScript und GWT. Läuft in allen Browsern ohne Plugins. Einfach und schnell zu bedienen: Erstellt gut aussehende Diagramme mit nur wenigen Codezeilen. Kostenlos für nichtkommerzielle Zwecke.

Fusion Charts verfügt über eine neue Javascript / JQuery-Bibliothek, die vielversprechend aussieht.

Falls Sie nur ein Balkendiagramm benötigen. Ich habe Code veröffentlicht, den ich in einem alten Projekt verwendet habe. Jemand sagte mir, dass die VML-Implementierung in neueren IE-Versionen fehlerhaft ist, aber die SVG sollte einwandfrei funktionieren. Möglicherweise kehren Sie zum Projekt zurück und veröffentlichen einige Server-Renderer, die ich bereits habe, und möglicherweise die WebGL-Rendering-Ebene. Es gibt einen Link: http://blog.conquex.com/?p=64

Wahrscheinlich nicht das, wonach das OP sucht, aber da diese Frage zu einer Liste von Optionen für die JS-Diagrammbibliothek geworden ist: jQuery Sparklines ist wirklich cool.

Schauen Sie sich ZingChart HTML5 Canvas, SVG, VML und Flash Charts an . Sehr leistungsfähige und kompatible Bibliothek. Ich bin im Zing-Team - erwähne uns auf Twitter @zingchart oder schicke Fragen an [email protected].