Erstellen Sie dynamische Diagramme schnell auf D3 mit Plottable.js

Die Freiheit D3.js-Bibliothek ist nur eine von vielen, die es Ihnen ermöglicht Erstellen Sie interaktive Grafiken auf der Seite. Während D3 vielleicht die beliebteste der Gruppe ist, ist es keine leichte Aufgabe, es zu lernen.

Deshalb Plottable.js ist so eine wertvolle Bibliothek. Es ist ein kostenloses Open-Source-Projekt gebaut auf D3.js, das macht es für jedermann einfacher zu erstellen interaktive Datendiagramme von Grund auf.

Diese Bibliothek erledigt die ganze schmutzige Arbeit, So können Sie sich auf die Besonderheiten wie Daten konzentrieren. Plottbar erzeugt den richtigen Code für Größe und Position eines Diagramms, das Sie auswählen.

Jedes Diagramm hat eine eigene Komponente in Plottable, wo Sie können Kopieren Sie den Vorlagencode um das Diagramm selbst neu aufzubauen. Zum jetzigen Zeitpunkt können Sie auswählen 10 Diagrammdiagrammstile, Dazu gehören Balkendiagramme, Kreisdiagramme, Streudiagramme und Flächendiagramme.

Sie können Komponenten einzeln neu erstellen und Passen Sie ihre Einstellungen dynamisch an. Auf diese Weise können Sie interaktive Elemente, Farben, Animationen, Positionierungen, Größen und alles was Sie sonst noch benötigen, einfach ändern.

Das volle Bibliothek ist auf GitHub verfügbar, wenn Sie den Quellcode durchsuchen und eine Kopie herunterladen möchten.

Am besten lernt man aber durch ein Beispiel. Darum sollten Sie sich deren anschauen Beispieldiagramme, die plottfähig sind um zu sehen, wie es in Aktion funktioniert.

Jeder Graph ist vollständig interaktiv, mit Quellcode zum Booten. Wenn Sie ein ähnliches Diagramm neu erstellen möchten, kopieren Sie den JS-Code und fügen Sie ihn nach Bedarf neu ein.

Ich habe zwei persönliche Favoriten von ihrer Website: die Kalender Heatmap modelliert nach GitHub's Activity Board und dem Synchronisierte Diagramme mit dynamischen Auswahlfunktionen.

Wenn Sie D3.js noch nie verwendet haben, werden Sie sich schwer tun, diese Bibliothek zu erlernen. Vor allem, weil es so ist in TypeScript geschrieben, so wollen Sie wahrscheinlich auch das abholen. Der endgültige Code lautet in ES5 JavaScript kompiliert, so sollte es sein arbeiten in allen gängigen Browsern.

Wenn Sie bereit sind zu tauchen, werfen Sie einen Blick auf ihre Seite mit Tutorials voller nützlicher Ressourcen. Sie lernen alles, was Sie benötigen, um mit Plottable und loszulegen Erstellen Sie dynamische webbasierte Diagramme von Grund auf neu.