9 Javascript-Bibliotheken zum Erstellen interaktiver Diagramme

Sie haben also Tonnen von Daten mit einer Reihe von Variablen in der Hand, die Sie irgendwie an jemanden weiterleiten müssen. Unorganisierte Rohdaten werden für sie schwer zu verstehen sein. Deshalb brauchen Sie Hilfe von Diagrammen. Im Webdesign, Diagramme sind eines der besten Werkzeuge zur Datenvisualisierung. Es ist gut lesbar, gut für die Augen und relativ einfach einzurichten.

Aber nehmen wir die Dinge noch einmal auf: Lass uns Fügen Sie diesen Diagrammen Animation und Interaktivität hinzu, so können leser nicht nur etwas Neues aus der chart lernen, sondern auch damit spielen. Es ist tatsächlich einfacher als es klingt, dank einer Reihe von JS-Bibliotheken. Lass uns sie überprüfen.

1. Diagramm JS

Chart.js ist eine Bibliothek ohne Abhängigkeiten zum Erstellen von Diagrammen in 6 verschiedenen Typen: Liniendiagramme, Balkendiagramme, Radardiagramme, Polardiagramme, Kreis- und Donutdiagramme. Die Bibliothek ist auch nach Diagrammtypen aufgeteilt, sodass Ihre Seiten nicht mit dem, was nicht benötigt wird, festgefahren sind. Es unterstützt responsives Design und Sie können Variablen wie Farbe oder Animation leicht ändern, um die Diagrammschnittstelle anzupassen.

2. Chartist JS

Chartist JS ist eine großartige Bibliothek, um responsive Diagramme zu erstellen, die SVG verwenden. Chartist bietet Ihnen neben der Reaktionsfähigkeit Flexibilität durch klare Trennung der Anliegen: Stil mit CSS und Kontrolle mit JS. Um die Anpassung zu erleichtern, sind die SASS-Dateien enthalten. Das Tolle daran ist, dass Sie unbegrenzte Möglichkeiten haben, Ihr Diagramm mit der Chartist-Animations-API SMIL zu animieren, die Ihnen zusätzliche Animationsoptionen bietet.

3. C3 JS

C3 JS ist eine Bibliothek zum Erstellen von Diagrammen basierend auf D3 JS. Es enthält den erforderlichen Code zum Erstellen von Diagrammen mit D3 JS, sodass Sie das Schreiben des D3-Codes überspringen und nur Ihre Daten eingeben können. C3 verfügt über eine Vielzahl von APIs, mit denen Sie Ihre Diagramme einfach steuern können. Um Ihr Diagramm anzupassen, definieren Sie Ihre eigenen benutzerdefinierten Stile für die angegebenen CSS-Klassen. Erstellen Sie Diagramme von einfachen Liniendiagrammen bis zu Maßdiagrammen. Schauen Sie sich diese Seite an, um zu sehen, wie die Bibliothek funktioniert.

4. Flot

Flot ist ein jQuery-Plan zum Erstellen von Diagrammen mit interaktiven Elementen wie Aktivieren oder Deaktivieren einer Serie, Interaktionen mit Datenpunkten, Verschieben, Zoomen und mehr. Flot bietet eine Vielzahl von Diagrammtypen. Wenn Sie mehr Fähigkeiten in Ihrem Diagramm wünschen, können Sie hier auch einige Plugins verwenden. Die Diagramme funktionieren gut mit Browsern, die HTML-Leinwände unterstützen.

5. EChart

Echart ist eine erstaunlich umfassende Bibliothek aus China, die mehrere Diagrammtypen unterstützt, große Datenmengen verarbeiten kann (bis zu 200.000 Datenpunkte in einem kartesischen Diagramm aufzeichnet), Skalen-Roaming, die Möglichkeit, Daten zwischen mehreren Diagrammen mühelos zu extrahieren, zu integrieren und auszutauschen Ein einfacher Wechsel von einem Datentyp zu einem anderen und vieles mehr.

6. Peity

Peity fügt Ihrer Webseite eine Minikarte hinzu. Es ist ein kleines jQuery-Plugin, das ein Element in ein Mini verwandelt svg Linie, Bar, Donut oder Kreisdiagramm. Sie müssen nur ein Element erstellen und einen Wert wie angeben 1/5 und telefonieren Peity ("Kuchen") auf diesem Element ein Mini-Kreisdiagramm erstellen. Um beispielsweise ein Donutdiagramm zu erstellen, das nur ein Fünftel hervorgehoben ist, ist hier der HTML-Code:

1/5

Sie können die Farbe, den Radius, die Breite und die Höhe des Diagramms anpassen, es wird jedoch standardmäßig klein angezeigt.

7. DC JS

DC JS hat Ähnlichkeiten mit C3 JS in Bezug auf den verwendeten Motor; Beide verwenden die D3-Bibliothek zum Rendern von Diagrammen in SVG. DC JS wurde entwickelt, um Sie bei der Visualisierung von Daten und Analysen für Browser und mobile Geräte zu unterstützen. Da es auf dem D3 JS basiert, können Sie Ihrem Diagramm Benutzerinteraktion hinzufügen. DC JS ist eine leistungsstarke Bibliothek zum Erstellen von Diagrammen von einfachen bis zu hohen Komplexitäten.

8. Google Chart

Sie können interaktive Diagramme und Datentools mithilfe der Google Visualisierungs-API über Google Chart erstellen. Es gibt Diagrammgalerien, in denen Sie die Datenvisualisierungsfunktionen von Google Chart überprüfen können. Um zu beginnen, sollten Sie einfaches JavaScript in Ihre Webseite einbetten, um die benötigten Google Chart-Bibliotheken zu laden. Listen Sie dann die Daten auf, die Sie darstellen möchten, und nehmen Sie einige Anpassungen über die Diagrammoptionen vor. Erstellen Sie schließlich ein Diagrammobjekt mit einer ID, und erstellen Sie auf Ihrer Webseite eine

mit dieser ID, um Ihr Diagramm anzuzeigen.

9. NVD3

NVD3 ist ein Satz wiederverwendbarer Diagramme und Diagrammkomponenten, die mit D3 JS erstellt werden. Diese Bibliothek ist daher eine "Vorlage", die Ihnen das Erstellen von Diagrammen erleichtern wird. Schauen Sie sich hier die vielen mit NVD3 erstellten Beispieldiagramme an.

Jetzt lesen: JavaScript-Bibliotheken zum Erstellen interaktiver und benutzerdefinierter Karten