Die Grafiken haben etwas Magisches. Die Kurvenkurve zeigt sofort die gesamte Situation - die Geschichte der Epidemie, Panik oder des Wohlstands. Diese Linie erleuchtet, regt Fantasie an, überzeugt.
- Henry. D. Hubbard
Die Datenmenge, mit der Sie arbeiten müssen, wächst ständig. Und je mehr Informationen, desto schwieriger ist es, sie zu verarbeiten. Aus diesem Grund ist das Thema Datenvisualisierung mittlerweile besonders beliebt - in Form von Grafiken, Diagrammen, Dashboards, vorzugsweise interaktiv. Die visuelle Darstellung der Daten ermöglicht es uns Menschen, weniger Zeit und Mühe für das Anzeigen, Analysieren und Verstehen sowie für das Treffen der richtigen, fundierten Entscheidungen auf dieser Grundlage aufzuwenden.
Es ist unwahrscheinlich, dass irgendjemand leugnen wird, dass JavaScript im modernen HTML5-Web die universellste und einfachste Technologie zur Visualisierung von Daten ist. Wenn Sie sich also mit Front-End-Entwicklung beschäftigen, haben Sie sich höchstwahrscheinlich bereits mit der Erstellung von JS-Diagrammen befasst, oder Sie werden dies in (baldiger) Zukunft feststellen.
Es gibt
viele JavaScript-Bibliotheken zum Erstellen von Grafiken und Diagrammen, von denen jede (wie jedes andere Tool) ihre Vor- und Nachteile hat. Um Ihnen das Leben zu erleichtern, habe ich beschlossen, über diejenigen zu sprechen, die mir am besten gefallen. Ich denke, die folgenden zehn Bibliotheken sind die besten JS-Bibliotheken zum Erstellen von Diagrammen, und sie können wirklich dazu beitragen, fast jede Aufgabe der Datenvisualisierung zu lösen. Lassen Sie uns gemeinsam die Liste durchgehen und sicherstellen, dass Sie sie zumindest grundlegend kennen und keine gute Bibliothek aus den Augen verloren haben, die in aktuellen oder zukünftigen großen Projekten nützlich sein könnte.
Nun, fangen wir an: Hier sind die besten JS-Bibliotheken für die Datenvisualisierung!
amCharts
amCharts ist eine der JavaScript-Bibliotheken, die für diejenigen nützlich ist, die eine einfache und gleichzeitig flexible Lösung für die Datenvisualisierung suchen.
Hauptmerkmale
- Viele verschiedene Arten von Diagrammen, einschließlich interaktiver Karten und Gantt-Diagramme.
- Die Fähigkeit, Daten „detailliert“ (Drilldown) und andere gut gestaltete interaktive Optionen zu analysieren.
- Die Dokumentation, die alle erforderlichen Methoden beschreibt, ist gut geschrieben, obwohl sie für meinen Geschmack nicht sehr bequem zu verwenden ist.
- Coole Animation von Grafiken.
- Integration mit React, Angular, Vue, Ember usw.
- Fertiges Plugin für WordPress.
- Exportieren Sie Diagramme in ein Bild oder eine PDF-Datei.
- Live-Grafik, vollständige Anpassung, spezielle Funktionen gemäß W3C-Standards.
- Voller technischer Support für alle Benutzer und Priorität für Kunden mit einer Lizenz.
- Kunden: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT & T usw.
Kosten
Branding mit Bezug in der kostenlosen Version. Um das Branding zu entfernen, müssen Sie eine kostenpflichtige Lizenz (ab 180 USD) erwerben. Außerdem erhalten Sie Zugriff auf vorrangigen Support.
Erfahren Sie mehr über amCharts
Anychart
AnyChart ist eine gut entwickelte, leichtgewichtige, multifunktionale JS-Bibliothek zur Visualisierung von Daten beim Rendern in SVG / VML. Ermöglicht Webentwicklern das Erstellen aller Arten von Grafiken und Diagrammen für die weitere Entscheidungsfindung auf dieser Grundlage.
Hauptmerkmale
- Über 80 Arten von Diagrammen, einschließlich herkömmlicher Diagramme, Bestandsdiagramme, Geovisualisierungen (Karten) sowie Gantt-Diagramme und PERT-Netzwerkdiagramme.
- Es gibt viele Optionen zum Laden von Daten: XML, JSON, CSV, JS-API, Google Sheets, HTML-Tabellen.
- Die Möglichkeit, in die Daten im Diagramm einzutauchen (Drilldown).
- Technische Indikatoren für technische Analysen und Anmerkungen (Zeichenwerkzeuge) „out of the box“.
- Umfassende Dokumentation und Beschreibung der API, reaktionsschneller Support.
- Integration mit Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS usw. Für Entwickler von Anwendungen und Dashboards in Qlik gibt es eine spezielle vorgefertigte Erweiterung für Qlik Sense.
- Viele vorgefertigte Beispiele für Grafiken, Diagramme, Dashboards sowie eine eigene spezielle Sandbox mit Code für die automatische Vervollständigung.
- Unterstützung für ältere Browser.
- Exportieren Sie Daten in verschiedenen Formaten, einschließlich PDF-Berichten. Jpg, png, svg image; Excel- (XLSX) oder CSV-Datendateien mit Grafiken.
- Kunden: Oracle, Microsoft, Citi, Samsung, Nokia, AT & T, Ford, Volkswagen, Lockheed Martin usw.
Kosten
Die Wasserzeichenversion ist kostenlos. Um das Branding loszuwerden und die Möglichkeit zu erhalten, AnyChart in kommerziellen Projekten zu verwenden, müssen Sie eine Lizenz erwerben (ab 49 USD).
Erfahren Sie mehr über AnyChart
Chart.js
Chart.js ist eine einfache und gleichzeitig recht flexible JavaScript-Bibliothek zur Datenvisualisierung, die bei Webdesignern und Entwicklern beliebt ist. Es ist eine hervorragende Basislösung für diejenigen, die keine Vielzahl von Diagrammtypen und individuellen Einstellungen benötigen, aber genug benötigen, um die Diagramme ordentlich, klar und informativ aussehen zu lassen.
Hauptmerkmale
- 8 Arten von Grafiken und Diagrammen: linear (Linie), linear mit Flächen (Fläche), liniert (Balken), kreisförmig (Kreis), Blütenblatt "Radar" (Radar), polar (Polar), Blase (Blase) und Streudiagramm ( Streuung).
- Alle Arten von Diagrammen können angepasst und mit Animationen versehen werden. Alle sind anpassungsfähig, wenn Sie im Netzwerk arbeiten.
- Die Funktionalität kann durch die Verwendung von Plugins verbessert werden.
- Gute Dokumentation.
- Unterstützung durch Stapelüberlauf.
- Unterstützung für IE9 + Browser.
Kosten
Kostenlose Open Source Bibliothek. Veröffentlicht unter der MIT-Lizenz.
Erfahren Sie mehr über Chart.js
Chartart.js
Chartist.js ist eine einfache Open-Source-JS-Bibliothek, mit der auch übersichtliche adaptive Grafiken und Diagramme erstellt werden können. Im Allgemeinen ist es gut geeignet für diejenigen, die nur elementare Linien-, Balken- oder Kreisdiagramme benötigen und in Bezug auf die Datenvisualisierung nicht viel benötigen. Schönes Aussehen, und es ist keine große Anzahl aller Arten von Funktionen erforderlich.
Hauptmerkmale
- Nur 3 Arten von Diagrammen: Linie, Balken, Kreis.
- Tolle Animation.
- Die API-Dokumentation enthält alle erforderlichen Informationen, ist jedoch nicht sehr bequem zu verwenden (machen Sie sich bereit, viel zu scrollen).
- Ermöglicht die Verwendung von Plugins zur Erweiterung der Funktionalität.
- Es verwendet SVG, um Diagramme zu zeichnen.
- Unterstützung für ältere Browser.
Kosten
Open Source, kostenlose Nutzung für jeden Zweck.
Erfahren Sie mehr über Chartist.js
D3.js
D3.js ist eine leistungsstarke Open-Source-Bibliothek zur Visualisierung von JavaScript-Daten. Er hat über 20.000 Gabeln auf GitHub. Im Kern ist D3 eher ein Framework als eine Bibliothek. Mit ihr zu arbeiten ist nicht so einfach, besonders am Anfang. Es gibt jedoch viele nützliche Informationsquellen zu D3. Und am Ende können Sie mit Hilfe dieser Bibliothek erstaunliche Originalvisualisierungen und Grafiken von Grund auf neu erstellen, was D3 zu einem wirklich lohnenden Werkzeug macht.
Hauptmerkmale
- Es unterstützt zahlreiche Arten von Diagrammen, viel mehr als die überwiegende Mehrheit anderer JavaScript-Bibliotheken (einschließlich beispielsweise des Voronoi-Diagramms).
- Es braucht Zeit, um zu meistern. Weniger klar und offensichtlich als einige der kommerziellen Bibliotheken auf der Liste (z. B. AnyChart). Kompensiert durch eine Vielzahl von Tutorials und eine wirklich coole API.
- Kombiniert leistungsstarke Visualisierungskomponenten mit einem datenbasierten Ansatz zur Manipulation des DOM.
- Einfaches Debuggen mit einem Browser-Tool.
- Viele Beispiele.
- Funktionen zur Kurvengenerierung.
- Drag & Drop-GUI.
Kosten
D3 ist eine Open-Source-Bibliothek zum Erstellen von Grafiken und Diagrammen, die für jeden Zweck absolut kostenlos ist.
Erfahren Sie mehr über D3.js.
Fusionsdiagramme
FusionCharts ist eine weitere gute Bibliothek zum
Erstellen interaktiver Grafiken und Diagramme mit Hunderten von vorgefertigten Beispielen. FusionCharts-Diagramme unterstützen sowohl JSON- als auch XML-Daten. Rendern - über HTML5 / SVG und VML.
Hauptmerkmale
- Dutzende von Diagrammtypen, 2D und 3D sowie über 950 Karten, die alle Kontinente abdecken.
- Animierte und vollständig interaktive Grafiken und Karten.
- Server-API für ASP.NET, PHP, Ruby on Rails.
- Kompatibel mit jQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java usw.
- Eine ziemlich detaillierte Bedienungsanleitung und Beschreibung der API.
- Viele Beispiele für Diagramme und Dashboards.
- Unterstützung für ältere Browser.
- Export nach PNG, JPG und PDF.
- Support - durch die Wissensdatenbank und das Community-Forum.
- Unbegrenzte Prioritätsunterstützung für Benutzer, die eine Lizenz erwerben.
- Kunden: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe usw.
Kosten
Kostenlos für nichtkommerzielle Zwecke. Bezahlte Lizenzen für die kommerzielle Nutzung (ab 497 USD).
Erfahren Sie mehr über FusionCharts
Google Charts
Google Charts ist eine ausgezeichnete Wahl für Projekte, bei denen Einfachheit und Stabilität von Diagrammen komplexen, detaillierten Anpassungseinstellungen vorzuziehen sind.
Hauptmerkmale
- Grafik-Rendering in HTML5 / SVG und VML.
- Viele Beispiele für Grafiken, Diagramme, Dashboards.
- Alle Grafiken sind interaktiv, einige können auch zoomen und schwenken.
- Vollständige Dokumentation.
- Unterstützung für ältere Browser.
- Unterstützung über FAQ, GitHub und Forum.
Kosten
Kostenlose Lizenz, aber der Quellcode ist nicht geöffnet. Sie können Google JS-Dateien nicht auf Ihrem Server hosten, daher ist es möglicherweise nicht für Sie geeignet, wenn Sie mit vertraulichen Daten arbeiten.
Erfahren Sie mehr über Google Charts
Highcharts
Highcharts ist eine der vielseitigsten und beliebtesten JavaScript-Bibliotheken zum
Erstellen von Grafiken und Diagrammen in HTML5 mit Rendering in SVG (VML). Es ist leichtgewichtig, unterstützt eine große Auswahl verschiedener Arten von Visualisierungen und bietet eine hohe Leistung.
Hauptmerkmale
- Verwendet reines Javascript. Daten können extern heruntergeladen werden.
- Wertvolle Dokumentation und Beschreibung API-Dokumentation, Benutzerfälle.
- Interaktivität, einschließlich Drilldown (die Fähigkeit, Daten "in der Tiefe" zu analysieren).
- Kann mit React, Angular, Meteor, .NET, iOS usw. verwendet werden.
- Export in die Formate PNG, JPG, PDF und SVG.
- Unterstützung für Benutzer der kostenlosen Version über das Forum und Stack Overflow. Premium-E-Mail- und Skype-Support steht nur kommerziellen Benutzern zur Verfügung, die die entsprechende Lizenz besitzen.
- Kunden: Visa, Yahoo! Facebook, Twitter, Groupon, Nokia, Ericsson, Mastercard, Yandex usw.
Kosten
Kostenlos für nichtkommerzielle Zwecke. Für die kommerzielle Nutzung müssen Sie eine Lizenz erwerben (ab 50 USD).
Erfahren Sie mehr über Highcharts
Plotly.js
Plotly.js ist eine kostenlose Open-Source-JavaScript-Bibliothek auf hoher Ebene. Aufbauend auf D3.js und WebGL. Es kann verwendet werden, um viele verschiedene Arten der Datenvisualisierung zu erstellen, einschließlich beispielsweise dreidimensionaler statistischer Diagramme.
Hauptmerkmale
- 20 Arten von Grafiken und Diagrammen, die in die Site eingebettet oder zum Erstellen dynamischer Präsentationen verwendet werden können.
- Es wird als browserbasierte Diagrammbibliothek für Python, R, MATLAB verwendet, um Diagramme in eine deklarative JSON-Struktur zu abstrahieren.
- Umfangreiche API-Dokumentation.
- Schöne Animation.
- Verwendet Reagieren.
- Exportieren Sie Diagramme nach PNG und JPG. Der Export nach EPS, SVG und PDF ist im Abonnement möglich.
- Viele fertige Beispiele.
- Es kann mit Excel-Tabellen oder direkt mit Ihrer Datenbank arbeiten.
- Support Forum.
Kosten
Kostenlose Open Source Bibliothek.
Erfahren Sie mehr über Plotly.js
Zingchart
ZingChart ist ein nützliches Tool zum Erstellen interaktiver und adaptiver Diagramme. Dies ist eine schnelle und flexible Bibliothek, mit der Sie ganz einfach mit Big Data arbeiten und Diagramme mit großen Datenmengen erstellen können.
Hauptmerkmale
- Unterstützt über 30 Arten von Grafiken und Diagrammen.
- Vollständig anpassbar, mit Designeinstellungen a la CSS.
- Kompatibel mit jQuery, Angular, Node.js, PHP usw.
- Arbeiten Sie mit Daten in Echtzeit und rendern Sie schnell Datensätze jeder Größe.
- Daten können über JS-Objekte, JSON, CSV, PHP, AJAX, MySQL geladen werden.
- Detaillierte und gut lesbare API-Dokumentation.
- Kostenloser und Premium-Support über die ZingChart-Hilfe, Stack Overflow, E-Mail und Chat.
- Kunden: Microsoft, Boeing, Adobe, Apple, Cisco, Google, Alcatel usw.
Kosten
Die Markenlizenz bietet kostenlosen Vollzugriff auf die ZingChart-Bibliothek. Für die kommerzielle Nutzung ist eine kostenpflichtige Lizenz erforderlich (ab 199 USD).
Erfahren Sie mehr über ZingChart
Fazit
Daher habe ich die besten JavaScript-Bibliotheken zum Erstellen von Grafiken und Diagrammen aufgelistet, zumindest diejenigen, die ich für erstklassig halte. Es wäre sehr schwierig, sie alle umfassend miteinander zu vergleichen und dabei absolut alle Parameter zu berücksichtigen. Jedes hat seine Vor- und Nachteile, und die Wahl hängt weitgehend von den Fähigkeiten des Entwicklers sowie von der spezifischen Aufgabe ab.
Natürlich gibt es einige Funktionen, die eine Bibliothek schneller oder hübscher im Design oder flexibler als andere machen. Letztendlich ist es jedoch nicht so wichtig, welche Bibliotheken auf der Liste stehen, denn am Ende ist die beste diejenige, die Ihre spezifischen Anforderungen als Teil einer einzelnen Aufgabe am besten erfüllt.
Mein Rat ist, alle diese führenden Bibliotheken zumindest ein wenig näher kennenzulernen: Wenn Sie JS-Diagramme benötigen, um Daten in einem bestimmten Projekt zu visualisieren, ist es sehr wahrscheinlich, dass eine oder mehrere von ihnen am besten zu Ihnen passen. Wenn Sie die Liste authentischer behandeln möchten, achten Sie auf den
Vergleich auf Wikipedia .
Wenn Sie Daten auf interaktiven Karten visualisieren müssen, bei denen geografische Trends, Beziehungen, Beziehungen, Flüsse usw. von größter Bedeutung sind, lesen Sie meinen vorherigen Artikel über die
besten JavaScript-Bibliotheken für die Geovisualisierung von Daten in Form von Karten (auf Habré gibt es eine
Übersetzung ins Russische ). .
Ich wünsche Ihnen einen schönen Tag und viel Spaß bei der Visualisierung von Daten mit JavaScript!
Dies ist meine Übersetzung des Artikels " Top JavaScript Charting Libraries for Every Data Visualization Need ", den ich zuvor auf Hacker Noon veröffentlicht habe .