Dies sind die besten JavaScript-Diagrammbibliotheken für 2019

Zunächst eine kurze Geschichte:

Da die Datenerfassung und -nutzung weiterhin exponentiell zunimmt, wird die Notwendigkeit, diese Daten zu visualisieren, immer wichtiger. Entwickler versuchen, Millionen von Datenbankeinträgen in schönen Diagrammen und Dashboards zu konsolidieren, die Menschen schnell und intuitiv interpretieren können.

Die Datenvisualisierungstechnologie hat sich in den letzten zehn Jahren weiter verbessert, und den Verbrauchern stehen jetzt viele erweiterte Diagrammbibliotheken zur Verfügung. In den frühen 2000er Jahren wurde die Diagrammgenerierung von serverseitigen Image-Bitmap-Diagrammen dominiert. Plugins wie Flash und Silverlight boten ein interaktiveres Chart-Erlebnis, das jedoch die Download-Geschwindigkeit, die Akkulaufzeit und die Systemressourcen stark beeinträchtigte.

Mit der Explosion der Nutzung von Mobilgeräten und Tablets wurden Plugins auf wichtigen Plattformen nicht mehr unterstützt, und Entwickler mussten auf offene clientseitige Technologien umsteigen, die überall ausgeführt werden konnten. Gleichzeitig haben das Aufkommen von Bildschirmen mit sehr hoher Auflösung und das häufigere Zoomen durch Berührungsgesten auflösungsunabhängige Vektordiagramme in den Vordergrund gerückt.

Betreten Sie die aktuelle Ära der Datenvisualisierung, die von JavaScript und SVG (Scalable Vector Graphics) dominiert wird. Diagramme können jetzt in allen Browsern ohne spezielle Plugins ausgeführt werden, unterstützen Interaktivität und Animationen und sehen selbst auf Geräten mit der höchsten Auflösung scharf aus. Bei der Überprüfung von über 50 Visualisierungsbibliotheken stachen diese 9 Produkte heraus:

D3.js

D3.js ist eine sehr umfangreiche und leistungsstarke Grafik-JavaScript-Bibliothek. Sie können beliebige Daten an ein Dokumentobjektmodell (DOM) binden und dann datengesteuerte Transformationen auf das Dokument anwenden.

D3 geht weit über typische Diagrammbibliotheken hinaus, einschließlich vieler anderer kleinerer technischer Module wie Achsen, Farben, Hierarchien, Konturen, Beschleunigungen, Polygone und mehr. All dies führt zu einer steilen Lernkurve.

Der Versuch, ein einfaches Diagramm zu erstellen, kann kompliziert sein. Alle Elemente einschließlich der Achsen und anderer Diagrammelemente müssen explizit definiert werden. Viele Beispiele zeigen, wie CSS zum Stylen von Diagrammelementen verwendet werden kann. Es werden keine auf Diagrammen basierenden Funktionen automatisch angewendet. Wenn Sie in das Unkraut eindringen und Kreativität einsetzen möchten, um jedes Element vollständig zu kontrollieren, ist dies die beste Wahl. Wenn Sie gegen die Uhr arbeiten, um die Anforderungen des Datenvisualisierungsprojekts zu erfüllen, ist dies möglicherweise nicht die beste Wahl, wenn Sie von vorne beginnen.

D3.js kann ein Baustein für eine Diagrammbibliothek sein. Entwickler haben D3 verwendet, um die Verwendung von Diagrammlösungen, die es verwenden, wie z. B. NVD3, zu vereinfachen.

D3.js ist Open Source und kostenlos zu verwenden.

JSCharting

Die JSCharting-Diagrammbibliothek unterstützt eine große Anzahl von Diagrammtypen, einschließlich Karten, Gantt, Bestand und anderer, für deren Verwendung häufig separate Bibliotheken erforderlich sind. Es enthält integrierte Karten aller Länder der Welt und eine Bibliothek mit SVG-Symbolen. Eine Reihe von eigenständigen Mikrodiagrammen kann in beliebigen Diagrammbeschriftungen oder in jedem div-Element auf einer Seite gerendert werden. UI-Steuerelemente (UiItems) sind ebenfalls enthalten, um umfangreichere interaktive Diagramme zu ermöglichen. Die Steuerung von Daten oder Visualisierungsvariablen in Echtzeit ist einfach und Diagramme können in die Formate SVG, PNG, PDF und JPG exportiert werden.

Die Galerie ist in Diagrammtyp- und Funktionsbeispiele unterteilt. Das Diagramm-Styling ist poliert und ergibt einige sauber aussehende Diagramme. Die Gesamtdarstellung bietet ein sauberes und professionelles Chart-Erlebnis.

Enthaltene Beispiele verwenden ein Konfigurationsobjekt, um Diagramme anzupassen. Die Einstellungen zum Erstellen und Steuern von Diagrammtypen sind sehr einfach zu verwenden. Es sind nur wenige Eigenschafteneinstellungen erforderlich, um komplexere Diagrammtypen anzugeben, und JSCharting verfügt über starke und dynamische Standardeinstellungen, sodass automatisch versucht wird, die besten Einstellungen für die Szenarien auszuwählen.

Die Dokumentation enthält viele Tutorials und ausführliche Beschreibungen der API-Eigenschaften. Viele Eigenschaften umfassen Beispielverwendung und Beispiellinks.

JSCharting ist für den nicht kommerziellen und persönlichen Gebrauch kostenlos und bietet auch kommerzielle Lizenzoptionen, die alle Diagrammtypen und Produkte gegen eine einzige Gebühr enthalten.

Highcharts

Highcharts ist eine beliebte JavaScript-Diagrammbibliothek, die von vielen der weltweit größten Unternehmen verwendet wird. Diagramme werden mit SVG erstellt und aus Gründen der Abwärtskompatibilität bis hin zu IE6 / IE8 auf VML zurückgesetzt. Die Demo-Diagramme zeigen einen ziemlich umfangreichen Funktionsumfang, sind aber optisch nicht beeindruckend. Die allgemeine Dokumentation enthält Tutorials zu vielen relevanten Themen und die API-Dokumentation ist gründlich.

Das Diagramm verwendet Konfigurationsoptionen zum Erstellen von Diagrammen und die API ist einfach zu verwenden.

Highcharts ist kostenlos für den nichtkommerziellen und persönlichen Gebrauch. Für andere Verwendungszwecke ist eine kommerzielle Lizenz erforderlich. Bestands-, Karten- und Gantt-Diagramme werden separat lizenziert.

amCharts

amCharts hat kürzlich seine Version 4 veröffentlicht, die eine starke SVG-Animations-Engine hinzufügt, mit der filmähnliche Szenen erstellt werden können.

Die Demo-Charts sehen sehr gut aus. Die meisten Demos bieten eine Reihe von Paletten und eine Schieberegler-Benutzeroberfläche, um Diagrammvariablen in Echtzeit anzupassen. Die Dokumentation enthält viele Tutorials und vollständige Beschreibungen der API-Eigenschaften.

Das Erstellen eines Diagramms unterscheidet sich geringfügig vom konfigurationsbasierten Ansatz und verwendet stattdessen eine deklarativere API. Es erfordert etwas mehr Code zum Konfigurieren von Diagrammen, bietet jedoch eine bessere Code-Vervollständigung.

amCharts bietet eine kostenlose Lizenz mit Markendiagrammen und kostenpflichtigen Lizenzen für andere Zwecke an.

Google Charts

Google Charts sind leistungsstark und einfach zu bedienen.

Die Beispieltabellen sehen sauber aus und sind augenschonend. In der Galerie und der erweiterten Galerie werden viele Diagrammtypen angezeigt. Durch Drücken des Hamburger-Menüs werden jedoch weitere Typen (z. B. Kalender) angezeigt, die in diesen Galerielisten nicht angezeigt werden.

Jeder Diagrammtyp verfügt über ein spezielles Tutorial mit Live-Beispielen. Die Tutorials enthalten Code für die zugehörigen Funktionen und API-Listen. Dies ist eine angenehme Erfahrung beim Einstieg in eine neue Diagrammbibliothek.

Diagramme werden mithilfe des Konfigurationsoptionsobjekts angepasst. Datensätze werden mit einer DataTable-Klasse gefüllt, die von allen Diagrammen verwendet werden kann. Jeder Diagrammtyp verfügt über eindeutige Optionen, die in den typspezifischen Tutorials aufgeführt sind. Die Benennung von Eigenschaften ist standardisiert und viele Optionen funktionieren für alle Typen.

Google Charts ist kostenlos, aber es gibt eine Einschränkung. Es ist ein Webdienst und kann nicht lokal gehostet werden. In der Vergangenheit hat Google APIs eingestellt. Wenn Ihre Verwendung geschäftskritisch ist, möchten Sie möglicherweise eine andere Option auswählen.

ZingChart

ZingChart bietet viele Diagrammtypen und lässt sich in Winkel-, Reaktions- und andere Frameworks integrieren. Es verfügt über einen starken Funktionsumfang mit vielen Anpassungsoptionen.

Die Demo-Diagramme zeigen eine Reihe von Styling-Themen, von denen einige besser aussehen als andere, aber die Optionen, sie nach Bedarf zu stylen, sind vorhanden. Demos zeigen nicht alle verfügbaren Diagrammtypen.

Die Dokumentation enthält Tutorials für alle verfügbaren Typen, eine Reihe von Funktionen und eine vollständige API-Liste.

ZingChart verwendet Konfigurationsoptionen zum Anpassen von Diagrammen. Beispiele enthalten viele Eigenschafteneinstellungen wie das Schriftstyling. Diese können dem Verständnis im Wege stehen, welche Einstellungen für ein bestimmtes Diagramm erforderlich sind.

ZingChart kann kostenlos mit Branding verwendet werden. Die kostenpflichtige Lizenz ist für die Verwendung ohne Markenzeichen verfügbar.

FusionCharts

FusionCharts gibt es schon seit vielen Jahren als Flash-basiertes Chart-Plugin. Es ist eine robuste Diagrammvisualisierungsbibliothek. Es unterstützt viele Datenformate wie XML, JSON und JavaScript, funktioniert in modernen Browsern und ist abwärtskompatibel zurück zu IE6. Viele JavaScript-Frameworks und serverseitige Programmiersprachen werden ebenfalls unterstützt.

Die Diagrammgalerie enthält eine große Anzahl von Beispielen und sie haben ein sauberes visuelles Erscheinungsbild.

Die Dokumentation enthält gute API-Beschreibungen und Beispiele für jeden Diagrammtyp. Die Konfigurationseigenschaften sind nach Aufgaben und Diagrammfunktionen gruppiert.

Diagramme werden mit konfigurationsbasierten Optionen erstellt und sind relativ einfach zu verwenden. Die Liste der Eigenschaften kann lang sein, wenn Sie tiefer in die API eintauchen. Alle Konfigurationseigenschaften sind flach, z. B. {chartLeftMargin, showAlternateHGridColor}. Es scheint ein Versuch zu sein, die Code-Vervollständigung zu verbessern.

FusionCharts ist für den persönlichen Gebrauch mit Chart Branding kostenlos. Bezahlte Lizenzen sind für die Verwendung ohne Markenzeichen und für kommerzielle Zwecke verfügbar.

KOOLCHART

KoolChart ist eine HTML 5-basierte JavaScript-Diagrammbibliothek. Ein Mapping- und Grid-Produkt ist ebenfalls verfügbar.

Die neue Version 5 enthält einen interaktiveren Funktionsumfang und ein aktualisiertes Design. Die Grafik ist sauber und modern. Die Verwendung von Canvas bietet eine bessere Leistung auf Kosten der Raster-Basis.

Die Beispiele verwenden ein auf Zeichenfolgen basierendes XML, um Diagrammoptionen anzuwenden, die weniger praktisch erscheinen als andere Ansätze. Diese Optionen sehen aus wie HTML5, werden jedoch über eine JavaScript-Zeichenfolge festgelegt.

Die API ist mit Beispieldiagrammen für jede Eigenschaft gut dokumentiert. Ein 173-seitiges PDF-Handbuch ist ebenfalls verfügbar.

Für die Bewertung steht eine zweimonatige Testphase zur Verfügung. Nach Ablauf der Testphase ist eine Lizenz erforderlich.

Chart.js

Chart.js ist eine Open-Source-JavaScript-Bibliothek, die 8 Diagrammtypen unterstützt. Es ist eine kleine js-Bibliothek mit nur 60 KB. Zu den Typen gehören Liniendiagramme, Balkendiagramme, Flächendiagramme, Radar, Kreisdiagramme, Blasen, Streudiagramme und gemischt. Eine Zeitreihe wird ebenfalls unterstützt. Es verwendet Canvas-Elemente zum Rendern und reagiert auf Fenstergrößenänderungen, um die Skalierungsgranularität beizubehalten. Es ist abwärtskompatibel zu IE9. Polyfills sind auch für die Arbeit mit IE7 verfügbar.

Die Beispielbilder sehen ziemlich modern aus und enthalten beim ersten Zeichnen erste Animationen. Es wird reibungslos animiert, wenn Serien oder Datenpunkte in Echtzeit hinzugefügt werden. Diagrammoptionen können nach dem Aufrufen einer update () -Funktion geändert werden, um das Diagramm neu zu zeichnen.

Beispielquellcode wird nicht in der Website-Galerie angezeigt, ist jedoch im GitHub-Repo verfügbar. Konfigurationsoptionen werden zum Erstellen und Ändern von Diagrammen verwendet. Die Options-API ist sauber und intuitiv.

Die Dokumentation ist gründlich und enthält Tutorials mit Eigenschafts-API und Codefragmenten.

Chart.js ist eine Open-Source-Bibliothek und kann kostenlos für den persönlichen und kommerziellen Gebrauch verwendet werden. Dies ist ein Plus. Die begrenzte Anzahl von Typen kann ein Problem für erweiterte Dashboard-Anforderungen sein.

Fazit

Das Ökosystem der JavaScript-Diagrammbibliotheken hat sich im letzten Jahrzehnt erheblich weiterentwickelt. Heutzutage gibt es eine große Anzahl von Diagrammprodukten, die sehr unterschiedliche Anforderungen erfüllen und eine breite Palette von Projekten über Hunderte von Diagrammtypen bedienen. Die meisten Bibliotheken bieten eine kostenlose Testversion oder Markenversion an, mit der Sie die Wirksamkeit des Diagramms anhand Ihrer eigenen Daten, des Ladens und der Komplexität des Projekts bewerten können.

Für die meisten Diagrammbibliotheken ist es einfach, mit einfachen kuratierten Datensätzen und statischen Visualisierungen umzugehen. Diagramme können jedoch möglicherweise nicht immer reibungslos funktionieren, wenn reale, dynamische Daten visualisiert werden. Möglicherweise ist mehr Arbeit erforderlich, um Elemente so anzupassen und anzuordnen, dass die Diagramme korrekt angezeigt werden. Diese manuelle Anpassung kann unterbrochen werden, wenn neue dynamische Daten angezeigt werden.

Um die beste JS-Diagrammlösung für Ihre speziellen Anforderungen auszuwählen, empfehle ich, Ihre eigenen Daten mit einigen der oben aufgeführten Bibliotheken zu testen, um eine ideale Anpassung für Ihre aktuellen und zukünftigen Projekte sicherzustellen.