Grafiken visualisieren leicht gemacht

GraphicsJS – eine mächtige, leichtgewichtige Grafikbibliothek
Kommentare

HTML5 ist das Rückgrat des modernen Web. Geht es darum, interaktive Bilder zu erstellen, kommen einem zuerst SVG und Canvas in den Sinn. Flash ist so gut wie tot, Silverlight ein selten genutztes Fabelwesen und nur einige wenige erinnern sich überhaupt noch an Plugins von Drittanbietern. Abhilfe kann hier GraphicsJS schaffen.

GraphicsJS ist eine quelloffene JavaScript-Grafikbibliothek, die auf SVG basiert. Warum SVG? Kurz gefasst: SVG eignet sich besser, um interaktive Elemente zu erstellen und zu bearbeiten. Das liegt daran, dass SVG ein XML-basiertes Vektorformat ist – wird ein Bild über einen <svg>-Tag in eine Webseite geladen, wird jedes Element darin im SVG-DOM verfügbar gemacht.

GraphicsJS – das steckt drin

Es existieren ja bereits eine ganze Reihe an Bibliotheken, die Entwicklern bei der Arbeit mit SVGs helfen – zum Beispiel Raphaël oder BonsaiJS. Sie alle haben ihre Vor- und Nachteile, doch GraphicsJS bringt ganz besondere Vorzüge mit.

Zum einen ist GraphicsJS leichtgewichtig und verfügt über ein flexibles JavaScript-API. Die Library implementiert viele reichhaltige Text-Features sowie einen virtuellen DOM – losgelöst von der browserspezifischen Implementation des HTML-DOM.

Zum anderen steckt hinter der JS-Bibliothek AnyChart, eines der führenden Unternehmen im Bereich der Visualisierung von interaktiven Daten. AnyChart setzt GraphicsJS bereits seit drei Jahren ein, um Grafiken in seinen eigenen Produkten zu rendern.

Sample einer mit GraphicsJS erstellten Grafik (im Original animiert)

Des Weiteren kann GraphicsJS sowohl in kostenlosen als auch in kommerziellen Projekten eingesetzt werden. Auf GitHub steht die Bibliothek unter Apache-Lizenz zur Verfügung.

GraphicsJS zeichnet sich zudem durch seine Cross-Browser-Kompatibilität aus: Unterstützt werden Internet Explorer 6.0+, Safari 3.0+, Firefox 3-0+ und Opera 9.5+. Außerdem bietet die Grafikbibliothek auch einen VML-Fallback für ältere Versionen des Internet Explorers.

Zusammenfassend gesprochen: GraphicsJS ermöglicht eine Kombination von Grafiken und Animationen mit beeindruckenden Effekten. Beispielanwendungen finden sich in der Galerie; die Dokumentation und die API-Reference helfen Entwicklern beim Einstieg.

Name GraphicsJS
Projektwebsite http://www.graphicsjs.org/
GitHub https://github.com/anychart/graphicsjs
API Summit 2017

Moderne Web APIs mit Node.js – volle Power im Backend

mit Manuel Rauber (Thinktecture), Sven Kölpin (Open Knowledge)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -