Mit GraphicsJS können Sie beliebige Webgrafiken erstellen, die Sie sich vorstellen können

Benutzerdefinierte JavaScript-APIs sind die zukunft des web. Das Open Source-Bewegung zusammen mit SVG-Grafiken haben die Möglichkeiten für Webentwickler aufgeflogen.

GraphicsJS ist eine kostenlose Open Source-Bibliothek und JS-API für benutzerdefinierte Grafiken erstellen in Webbrowsern. Es kann als verwendet werden Visualisierungswerkzeug zur grafischen Darstellung von Daten oder zur Erstellung von coolem Material nur um zu zeigen.

Auf der Startseite finden Sie eine großer Abschnitt von Demos erstellt mit GraphicsJS. Und diese Beispiele kratzen nur die Oberfläche des Möglichen.

Die Bibliothek verwendet ein eigenes virtuelles DOM Dies ist eine Abstraktion des Browser-DOMs. Das ist etwas ähnlich wie das virtuelle DOM von React und es wird auf ähnliche Weise verwendet.

Da diese Bibliothek einen Klon des DOM verwendet, ist es auch benötigt echte HTML-Elemente an etwas arbeiten. Deshalb ist es so verwendet SVG / VML anstatt eingebettete Objekte in der HTML5-Leinwand.

Diese Grafik-Engine war ursprünglich in die AnyChart-Bibliothek integriert. Von da war es gepaart und Open-Source als eigene JS-API.

GraphicsJS unterstützt alle gängigen Browser, sogar aus dem IE6 und Chrome 1.0.

Alle Quellcodes ist im GitHub-Repo verfügbar, wo Sie eine Kopie herunterladen und herumschauen können, wenn Sie Zeit haben. Aber ich denke, der beste Weg zu lernen ist, mit dem Kopf voran zu tauchen.

Sie könnten durch die API-Dokumente aber normalerweise finde ich diese Dokumente überflüssig. Dokumente werden am besten verwendet, wenn Sie dies benötigen Finden Sie eine bestimmte Methode oder einen API-Aufruf referenzieren.

Wenn Sie gerade erst anfangen, können Sie besuchen sie den spielplatz auf der AnyChart-Website gehostet. Dies ist ein schöner Ort, um zu finden Arbeitscode-Beispiele die Syntax aufbrechen.

Oder, wenn Sie wirklich mit Quadrat beginnen wollen, dann die GraphicsJS Startanleitung kann helfen. Das ist eher das “offiziell” Dokumentation, so dass es Ihre Hand für eine hält glattere Lernkurve im Vergleich zu den API-Dokumenten.

Wie auch immer, ich liebe es, dass GraphicsJS Open Source ist und in der Entwickler-Community veröffentlicht wurde. Es ist weit von einer perfekten Bibliothek entfernt, aber es ist eines der besten, die wir haben Erstellen eigener SVG-Grafiken von Grund auf.

Und um die Gänge zum Laufen zu bringen, sehen Sie unten ein Beispiel, was Sie mit Graphics.js bauen können.