JavaScript-Diagrammbibliotheken: 13 beliebte Optionen

#1 – Diagramm.js

Chart.js ist eine praktische Diagrammbibliothek, die HTML5s <canvas> zum Rendern der Diagramme verwendet.

Die Bibliothek ist mit Sicherheit die erste Wahl für einfache Projekte, da sie beispielsweise standardmäßig responsiv ist und Sie auch Animationseffekte basierend auf dem Benutzerverhalten anwenden können.

Hier sind die 8 Arten von Diagrammen, die Sie mit Chart.js erstellen können:

• Flächendiagramm
• Balkendiagramm
• Blasendiagramm
• Donut- und Tortendiagramme
• Liniendiagramm
• Gemischte Diagrammtypen
• Polarbereichskarte
• Radardiagramm

Was die Benutzerfreundlichkeit betrifft, so ist die Syntax einfach, und selbst wenn Sie noch nie mit JavaScript gearbeitet haben, ist das Erstellen eines neuen Diagramms unkompliziert.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Wenn Sie die Diagramme um dynamische Funktionen und Datenpooling erweitern möchten, verfügt die Bibliothek über ein Plugin-System, mit dem Sie neue Funktionen hinzufügen können.

Chart.js-Beispiel

Siehe Pen Proof of Concept: Chart.js with Background Gradient von Sven (@hofmannsven) auf CodePen.

Chart.js Zusätzliche Ressourcen

• Chart.js + Next.js = Schöne, datengesteuerte Dashboards
• Erste Schritte mit Chart.js; Aufgabenbasiertes Lernen

#2 – D3.js

Lassen Sie mich zunächst sagen, dass D3 eher ein Datenvisualisierungstool als eine traditionelle Diagrammbibliothek ist.

Mit D3 können Sie einen Datensatz angeben und an das DOM binden. Anschließend können Sie die Bibliotheksfunktionen verwenden, um diese Daten in eine eindeutige visuelle Darstellung umzuwandeln. Für die visuelle Präsentation nutzt D3 HTML-Tabellen, SVG und <canvas> zum Rendern der Daten auf einer Seite.

Wenn Sie jemals einen dieser geobasierten, sich drehenden Globen mit mehreren interaktiven Datenpunkten darauf gesehen haben, besteht die Möglichkeit, dass die Präsentation mit D3 erstellt wurde. Es eignet sich jedoch auch gut für praktische Zwecke, wie z. B. das grundlegende Diagramm, das Sie in der Demo unten sehen können. Letztendlich sollten Sie sich auf den offiziellen Abschnitt Tutorials für D3 beziehen, um seine komplizierteren Funktionen zu erkunden.

D3.js-Beispiel

Siehe Pen D3 Chart + ReactJS von Web Dev (@ronaldmarin) auf CodePen.

Zusätzliche D3.js-Ressourcen

• D3.js-Tutorial
• Erstellen einer D3.js-Kalender-Heatmap

#3 – Apache ECharts

Einer der Gründe, warum Apache ECharts so beliebt ist, ist, dass Sie sofort Zugriff auf Hunderte von vorgefertigten Diagrammbeispielen erhalten. Sie können dies selbst überprüfen, indem Sie das Beispielverzeichnis besuchen. Diese Seite umfasst Diagramme und Beispiele in Kategorien wie Linien, Balken, Tortendiagramme, Streuung, Heatmaps, Diagramme und vieles mehr.

Und jedes einzelne Beispiel enthält JavaScript- und TypeScript-Codebeispiele. Aber das ist noch nicht alles, es gibt einige reale Vorteile bei der Verwendung dieser Bibliothek. Hier sind einige davon:

• Daten-Streaming. Möchten Sie interaktive Diagramme mit Millionen von Datenpunkten erstellen? ECharts verwendet WebSockets zum Streamen von Daten, sodass sie selbst bei extrem großen Datensätzen asynchron geladen werden können.
• Mobilfreundlich. Wenn Benutzer ein ECChart auf ihren Mobilgeräten anzeigen, wurde das Diagramm selbst optimiert, um interaktive Funktionen bereitzustellen – Zoomen, Schwenken und SVG-Rendering, um die beste Zustellbarkeit zu gewährleisten.
• Dynamische Daten. Sie können ECharts mit mehreren (separaten) Datenpunkten füttern, und die Bibliothek wird das Diagramm automatisch animieren, um den Benutzern ein interaktives Erlebnis zu bieten.
• Barrierefreiheit. Apache ECcharts (v4.0 und höher) wurde entwickelt, um den WAI-ARIA-Richtlinien zu folgen.

Sie können Ihre Diagramme auch über ein externes CDN auf Ihrer Website anzeigen.

Apache ECharts-Beispiel

Sehen Sie sich das Pen Apache Echart-Beispiel von Vale (@vsigno) auf CodePen an.

Zusätzliche Apache ECharts-Ressourcen

• Erstellen Sie in einer Woche ein besseres GitHub Insight Tool

#4 – Verschwört

Plotly ist die Muttergesellschaft von Dash, einer Low-Code-Lösung für die Bereitstellung von Datenanwendungen. Und sie entwickeln ihre eigene Grafikbibliothek – Plotly – vor Ort.

Mit Plotly können Sie die einfachsten Diagrammvisualisierungen erstellen, aber die wahre Stärke der Bibliothek liegt in der Fähigkeit, statistikbasierte Diagramme, 3D-Datendarstellungen und Diagramme basierend auf Finanzdaten zu erstellen.

Es ist sowohl als Node.js-Modul verfügbar, kann aber auch direkt aus einem CDN verwendet werden.

Plottisches Beispiel

Siehe die Anmerkung Pen Add on click event by plotly (@plotly) auf CodePen.

#5 – Frappe

Die Frappe-Diagrammbibliothek wird von den Leuten erstellt, die das Frappe-Framework erstellt haben. Diese Bibliothek ist so einfach wie es nur geht. Und diese Einfachheit trägt wesentlich zur Popularität der Bibliothek bei.

Die Bibliothek erfordert keine externen Abhängigkeiten und kann mobilfreundliche SVG-Diagramme in nur wenigen Codezeilen rendern. Hier ist ein Codebeispiel für ein einfaches Achsendiagramm:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

Und dieser kleine Ausschnitt würde in ein Diagramm wie dieses übersetzt werden:

Es gibt auch Unterstützung für gemischte Diagramme (mehrere Diagramme in einem), Anmerkungen, Heatmaps und eine API ist verfügbar, wenn Sie Daten in Echtzeit aktualisieren oder exportieren möchten.

Frappe-Beispiel

Sehen Sie sich den Pen Frappe Hello World von Jang Rush (@weakish) auf CodePen an.

#6 – ApexCharts

ApexCharts ist eine sehr traditionelle Diagrammbibliothek. Der Hauptunterschied zwischen ApexCharts und Frappe (zum Beispiel) besteht darin, dass ApexCharts etwas mehr Demos bietet. Bietet aber auch native Unterstützung für beliebte Frameworks wie React, Vue und Angular. Dies bedeutet auch, dass alle Demo-Charts ihre jeweiligen Samples in der Syntax der genannten Frameworks geschrieben haben.

Was die Funktionen betrifft, werden alle Diagramme im SVG-Format generiert und sind standardmäßig für Mobilgeräte optimiert. Sie können auch Funktionen wie reibungslose Animationen und Anmerkungen nutzen und Ihre Diagrammthemenpalette anpassen, indem Sie einen der 10 Beispielstile auswählen.

ApexCharts-Beispiel

Sehen Sie sich das Pen Realtime Dashboard von ApexCharts (@apexcharts) auf CodePen an.

#7 – G2

Ich habe in letzter Zeit mehrfach über Ant Design gesprochen, unter anderem in meinen Artikeln über Komponentenbibliotheken für React.js und Vue. Ant ist nicht nur auf GitHub äußerst beliebt, sondern wird auch von Communitys in allen Regionen der Welt geliebt.

Und die G2-Diagrammbibliothek (oder wie sie es „Visualisierungsgrammatik“ nennen) ist Ant Designs Implementierung eines Diagrammsystems, das das Ant Design System verwendet. Ich empfehle dringend, die AntV-Homepage zu besuchen, auf der Sie viele andere Bibliotheken zum Thema Echtzeit-Datenvisualisierung finden.

Es wird am häufigsten verwendet, um Dinge wie Admin-Dashboards zu erstellen, Datenpfade zu erstellen und Beispiele für interaktive Datenvisualisierungen mit seiner Rendering-Engine zu erstellen. Diese Engine kann Diagramme und Datenvektoren über WebGL, Canvas und SVG rendern. Und da die Bibliothek austauschbar ist, können Sie Ihre Diagrammpräsentationen durch robustere Bibliotheken wie D3.js (die wir zuvor gesehen haben) weiter verbessern.

#8 – grobViz

Die roughViz-Bibliothek von Jared Wilber ist eine Kombination aus 3 verschiedenen Bibliotheken: D3.js, Rough.js und handy – ein Prozessor für handgezeichnete Skizzen. Wie Sie dem obigen Beispiel-Screenshot entnehmen können, ist dies keine typische Diagrammbibliothek. roughViz wurde ausschließlich zu dem Zweck entwickelt, Ihnen bei der Erstellung von handgezeichneten Diagrammen im Skizzenstil mit JavaScript zu helfen.

Diese Art von Bibliothek ist eine großartige Ergänzung für persönliche Projekte, mit anderen Worten – Projekte, die einen kreativeren Funken erfordern als den traditionellen professionellen Ansatz. Und die Syntax selbst ist so einfach wie sie sein könnte, sehr ähnlich wie bei Frappe und ApexCharts.

Sie können sich davon in der Demo unten selbst überzeugen.

roughViz-Beispiel

Sehen Sie sich die Pen RoughViz-Demo von Danny Englishby (@DanEnglishby) auf CodePen an.

#9 – Leichtgewichtige Diagramme

Wenn Sie an einem finanzbezogenen Projekt (oder Kryptowährung für diese Angelegenheit) arbeiten, ist es ziemlich klar, dass viele der zuvor erwähnten Diagrammbibliotheken einfach nicht ausreichen. Daher ist hier Lightweight Charts – eine Diagrammbibliothek, die speziell für die Anzeige von finanzbasierten Diagrammen und Grafiken entwickelt wurde.

Diese Bibliothek ist nicht nur Open-Source und leichtgewichtig, sondern enthält auch alle notwendigen Funktionen, die für die Anzeige von Diagrammdaten über Finanzen und ihre dynamische Struktur erforderlich wären.

Eine dieser Funktionen ist das Datenstreaming, mit dem Sie Echtzeitdaten an Ihre Leinwand übergeben und sie dann aktualisieren lassen können, ohne dass der Benutzer die Seite aktualisieren muss. Und ein weiterer Faktor, den Sie vielleicht in Betracht ziehen, ist die Leistung, die kein Problem sein sollte, wie auf der Homepage dieser Bibliothek erklärt,

„Unsere Charting-Lösungen wurden von Anfang an darauf ausgelegt, mit riesigen Datenarrays zu arbeiten. Charts bleiben auch bei Tausenden von Balken reaktionsschnell und agil, selbst bei Aktualisierungen mehrmals pro Sekunde mit neuen Ticks.“

Schauen Sie sich die Demo unten an, um ein Gefühl dafür zu bekommen, aber auch viele der Diagrammoptionen und -funktionen.

Beispiel für Lightweight-Diagramme

Sehen Sie sich das erweiterte Diagramm Pen Tradingview von truong (@truong160196) auf CodePen an.

Lightweight Charts Zusätzliche Ressourcen

• Finanzdiagramme für Ihre Anwendung

#10 – Reklametafel

Billboard ist eine auf D3 basierende Interface-Chart-Bibliothek. Es verfügt über alle modernen Funktionen, die Sie erwarten würden – SVG-Rendering, Touch-Unterstützung für mobile Geräte, eine einfache Benutzeroberfläche und eine großartige API-Dokumentation.

Meine Lieblingsfunktion, und wohl auch für viele andere, ist jedoch, dass Billboard über 230 Beispiele der Diagramme bietet, die Sie mit dieser Bibliothek erstellen können. Diese Beispiele sind in Diagrammkategorien wie Basic, Axis, Data, Grid, Interaction, Region und viele andere unterteilt.

Das bedeutet, dass Sie nicht nur den richtigen Diagrammtyp für Ihr Projekt und seine Anforderungen finden, sondern auch andere Optionen erkunden und sehen können, ob ein bestimmtes Beispiel Ihre Aufmerksamkeit erregt.

Billboard.js-Beispiel

Siehe Pen Chart Requests – Billboard.js von DTCC (@dtcc) auf CodePen.

#11 – Perspektive

Perspective ist eines der Projekte, die FINOS (Open-Source Fintech) betreibt, und FINOS selbst ist auch Teil der Linux Foundation. Ähnlich wie Lightweight Charts ist Perspective.js darauf ausgerichtet, Diagrammlösungen für finanzbasierte Projekte bereitzustellen. Es kann jedoch viel mehr als das und wird häufig in Projekten im Zusammenhang mit E-Commerce, Datengrids und Sendungssegmentierung eingesetzt.

Wenn Sie jemals Diagramme über Covid-19, Flughäfen und große Sportereignisse wie die Olympischen Spiele gesehen haben, besteht eine gute Chance, dass die Schnittstellen- und Datenstromintegration mit Perspective durchgeführt wurde. Es verfügt über eine umfassende Benutzeroberfläche, die für Datenströme und komplexe Echtzeitanalysen optimiert ist.

Es ist für JavaScript- und Python-Entwickler verfügbar und verwendet Custom Elements Web Component.

#12 – Toast-UI-Diagramm

Wenn überhaupt, ist die Diagrammbibliothek der Toast-Benutzeroberfläche eine weitere Option, die Sie in Bezug auf Diagrammstile und deren Design in Betracht ziehen sollten. Die Funktionalität hier ist den Bibliotheken, die wir uns bereits angesehen haben, sehr ähnlich.

Ich denke, der Bereich, in dem sich Toast UI von anderen Optionen unterscheidet, ist seine API-Spezifikation. Es ist wahrscheinlich eine der besseren APIs, die Sie in die Hände bekommen können, und es wird mit einer kostenlosen ausführlichen Dokumentation geliefert. Eine der API-Funktionen ist Instanzen , eine Möglichkeit, Diagrammdaten dynamisch zu ändern, entweder weil sich Ihre Datenquelle geändert hat oder aufgrund von Benutzereingaben.

Zu den von Toast unterstützten Diagrammtypen gehören Balken, Säulen, Linien, Flächen, Blasen, Baumkarten, Radare, radiale Balken und andere. Die bevorzugte Methode zur Verwendung dieser Bibliothek ist npm, aber ein CDN ist verfügbar, und Sie müssen lediglich einen div id="chart" angeben, in dem das Diagramm angezeigt werden soll.

#13 – Recharts

Wenn Sie hauptsächlich mit React.js arbeiten, baut die Recharts-Bibliothek mit React auf D3.js auf. Es respektiert die native React.js-Komponentenarchitektur, und mit Recharts erstellte Diagramme können entkoppelt und als einzelne Komponenten auf den von Ihnen benötigten Seiten wiederverwendet werden.

Alle Diagrammbeispiele haben ihre Komponentenstruktur vorab geschrieben, falls Sie sie in einem bestehenden Projekt ausprobieren möchten. Die Bibliothek wurde erstmals 2016 veröffentlicht, befindet sich aber noch in der aktiven Entwicklung.

Recharts-Beispiel

Sehen Sie sich die Pen ReCharts von binu (@binutomy) auf CodePen an.