it-swarm.com.de

JavaScript-Diagrammbibliothek

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

223
Steve M

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, gerendert in IE mit ExplorerCanvas, das wiederum auf VML basiert
  • SVG in standardbasierten Browsern, die im IE als VML gerendert werden

Es gibt Vor- und Nachteile beider Ansätze, aber für eine Diagrammbibliothek würde ich die spätere empfehlen, da sie gut in DOM integriert ist, das Manipulieren von Diagrammelementen mit dem DOM und vor allem das Festlegen von DOM-Ereignissen ermöglicht. Im Gegensatz dazu müssen Canvas-Diagrammbibliotheken das DOM-Rad neu erfinden, um Ereignisse zu verwalten. Wenn Sie also keine statischen Diagramme ohne Ereignisbehandlung erstellen möchten, sollten SVG/VML-Lösungen besser sein.

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

Raphael ist eine sehr aktive, gut gewartete 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 Charting-Bibliotheken, 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 von eine der Ico-Gabeln auf Github .

160
Jean Vincent

Wenn Sie jQuery verwenden, habe ich festgestellt, dass flot sehr gut ist - probieren Sie Beispiele aus, um festzustellen, ob sie Ihren Anforderungen entsprechen, aber ich habe festgestellt, dass sie dies tun das meiste was ich für mein aktuelles projekt brauche.

Zusätzlich hat ExtJS 4. eine große Anzahl von Diagrammen eingeführt - sehr leistungsfähig und wurde für die Arbeit mit Live-Daten entwickelt.

70
Bittercoder

Check out http://www.highcharts.com !

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 die Diagrammtypen Linien-, Spline-, Flächen-, Flächenspline-, Spalten-, Balken-, Kreis- und Punktdiagramm.

60
Torstein Hønsi

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

36
Jan Gressmann

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 das Erstellen von interaktiven 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 jetzt 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 befindet sich nun 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, obwohl es etwas weniger leistungsfähig ist.

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

15
Fgblanch

jqPlot ist großartig. Wenn Ihre Anforderungen ziemlich "normal" sind und Sie nur einige Diagramme zeichnen möchten, sind Sie wahrscheinlich von der Menge der js-Diagrammoptionen überfordert. 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 unter Berücksichtigung eines bestimmten Anwendungsfalls erstellt.

14
Fletch

Ich suchte kürzlich nach einer Javascript-Diagrammbibliothek und habe eine ganze Reihe ausgewertet, bevor ich mich schließlich für jqplot entschied, das meinen Anforderungen sehr gut entsprach. Wie in der Antwort von Jean Vincent bereits erwähnt, haben Sie die Wahl zwischen einer Canvas- und einer SVG-basierten Lösung.

Meines Erachtens lauteten 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 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 Charts mehr erstellen müssen, sich darauf einstellen, einige Zeit in das Lernen zu investieren und dann eine gute Menge Code zu schreiben, um ein relativ einfaches Diagramm zu erstellen.

Wenn Ihre Diagrammanforderungen angemessen sind, z. Wenn Sie Linien- oder Balkendiagramme oder ein oder zwei Tortendiagramme mit eingeschränkter Interaktivität benötigen, sollten Sie sich mit Canvas-basierten Lösungen befassen. 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 werden alles sein, was Sie brauchen. Natürlich können Sie nur die von der Bibliothek unterstützten Diagrammtypen erstellen, die in der Regel auf verschiedene Arten von Linien, Balken und Kreisen beschränkt sind. Die Auswahlmöglichkeiten für die Interaktivität sind äußerst begrenzt, dh für viele der Bibliotheken auf dem Markt nicht vorhanden, obwohl bei den besseren Bibliotheken einige eingeschränkte Hover-Effekte möglich sind.

Ich habe mich für JQplot entschieden, eine Canvas-basierte Lösung, da ich nur einige Standardtypen von Diagrammen brauchte. Aufgrund meiner Nachforschungen und des Herumspielens mit den verschiedenen Optionen habe ich festgestellt, dass es einigermaßen voll ausgestattet ist (wenn Sie nur die Standarddiagramme verwenden) und extrem einfach zu bedienen ist. Ich würde es daher empfehlen, wenn Ihre Anforderungen ähnlich sind.

Um es zusammenzufassen, einfach zu halten und Diagramme zu erstellen, gehen Sie jetzt zu JQplot. Komplex/anders und nicht zeitgemäss, dann gehts mit Raphael und Freunden.

14
skorks

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 besteht in der Anzahl der unterstützten Funktionen.
Auch wenn Flot einfacher ist, ist d3.js definitiv mächtiger.

4
Stefan Steiger

Versuchen Sie PlotKit

3
Jason Bunting

Ein weiteres Beispiel ist RGraph: Javascript Charts und Graph Library:

http://www.rgraph.net

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

3
Richard
3
vPJ

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

3
Argelbargel

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

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

3
Peter McG

Check out Google Visualization API , eine Art Verallgemeinerung des einfacheren Chart API

2

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

2
Aaron Reis

Mein Favorit (Flot) wurde bereits erwähnt.

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

2
Rui Vieira

In der Dojo-Diagrammbibliothek ist viel los, und was toll 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/

2

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

Verfügt über sehr coole interaktive Optionen, einschließlich Karten, Messgeräte und Diagramme.

2
Ryan Charmley

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

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

2
Chii

Protochart ist alles was Sie brauchen

1
Vince Panuccio

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

1
PhoebeB

Sencha hat Raphael übernommen und jetzt sind ihre Charts ab Version 4 reines Javascript. Emprise und die oben erwähnten HighCharts sind meine beiden Favoriten.

http://www.sencha.com/

1
Justin Thomas

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

1
John Topley

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

1
Luke Bennett

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

0
Andrew Begin

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

0
Ivan Mishonov

Wahrscheinlich nicht das, wonach das OP sucht, aber da diese Frage zu einer Liste von JS-Diagrammbibliotheksoptionen geworden ist: jQuery Sparklines ist wirklich cool.

0
Fletch

Fusion charts hat eine neue Javascript/JQuery-Bibliothek, die vielversprechend aussieht.

0
amurra

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: Mit nur wenigen Codezeilen lassen sich großartig aussehende Diagramme erstellen. Kostenlos für nichtkommerzielle Zwecke.

0
Hoang-Tran Vo