Erstellen Sie auf JavaScript basierende Datendiagramme mit Billboard.js

Grafiken und Grafiken spielen eine entscheidende Rolle bei der Verbesserung der Webinhalte. Mit moderner Technologie ist es so einfach, benutzerdefinierte Grafiken wie SVG-Symbole in Ihre Seite einzufügen.

Ein anderes überraschendes Bild, das Sie von Grund auf neu erstellen können, ist ein Web-Chart.

Das kann dir helfen grafisch die Daten visuell darstellen So können Ihre Besucher relevante Informationen schnell überfliegen. Anstatt einen Graphen selbst zu programmieren, können Sie eine Bibliothek wie Billboard.js verwenden, um alle schweren Aufgaben zu erledigen.

Dies ist eigentlich auf D3 aufgebaut, einer JavaScript-Datenvisualisierungsbibliothek. Es ist mit Abstand das beliebteste Produkt, was es zu der sichersten Abhängigkeit macht, nach der man fragen könnte.

Mit Billboard.js können Sie schnell und einfach auf die D3-API zugreifen. Das Hauptziel von Billboard ist Benutzerfreundlichkeit und macht es für jedermann zugänglich. Obwohl es hilfreich ist, etwas Erfahrung mit JavaScript zu haben, müssen Sie sicherlich kein Experte sein.

Beachten Sie, dass die gesamte Codebase die ES6-Syntax verwendet, was für weniger erfahrene JS-Entwickler verwirrend sein kann.

Solange Sie wissen, wie man den Code kompiliert dir sollte es gut gehen Wir haben ein paar heiße Features von ES6 behandelt, wenn Sie mehr darüber erfahren möchten.

Alle technischen Details zu diesem Plugin können nett erscheinen. Aber du willst wahrscheinlich nur wissen Was kann das?.

Schauen Sie sich die Demo-Seite an und klicken Sie sich durch einige Live-Beispiele.

Sie finden alles von Tortendiagrammen über Streudiagramme bis hin zu benutzerdefinierten animierten Balkendiagrammen.

Mit Billboard.js haben Sie volle Kontrolle über Ihre Daten. Sie steuern, wie sie auf der Seite angezeigt werden, wie sie strukturiert ist und welche Art von UI / UX-Funktionen Sie hinzufügen (falls vorhanden)..

Es ist wirklich eine fantastische Kartenbibliothek und es ist eine der am einfachsten zu erlernenden. Sehen Sie sich das GitHub-Repo des Projekts an, um mehr zu erfahren.

Sie können dieses Codefragment auch in CodePen verwenden, wenn Sie mit dem Code in Ihrem Browser spielen möchten.