GraphicsJS låter dig skapa vilken webbgrafik du kan föreställa dig

Anpassade JavaScript API är framtiden för webben. De öppen källkodsrörelse i kombination med SVG-grafik har blivit öppna möjligheterna för webbutvecklare.

GraphicsJS är ett gratis open source bibliotek och JS API för bygga anpassad grafik i webbläsare. Den kan användas som en visualiseringsverktyg för att gradera data, eller det kan användas för att göra svala saker bara för att visa upp.

På hemsidan hittar du en stort avsnitt av demo skapad med GraphicsJS. Och dessa exempel klibbar bara ytan på vad som är möjligt.

Biblioteket använder sin egen virtuella DOM vilket är en abstraktion av webbläsarens DOM. Detta är något liknande Reacts virtuella DOM och det används på ett liknande sätt.

Eftersom det här biblioteket använder en klon i DOM, är det också behöver reella HTML-element att jobba på. Det är därför det använder SVG / VML snarare än inbäddade objekt i HTML5-kanalen.

Denna grafikmotor var ursprungligen inbyggd i AnyChart-biblioteket. Därifrån var det tweaked och öppet som eget JS API.

GraphicsJS stöder alla större webbläsare, även tillbaka till IE6 och Chrome 1.0.

All källkod finns i GitHub repo där du kan ladda ner en kopia och kasta om du har tid. Men jag tycker att det bästa sättet att lära sig är att dyka i huvudet först.

Du kan bläddra igenom API-dokument men jag brukar hitta dessa dokument överflödiga. Dokument används bäst när du behöver hitta en specifik metod eller API-samtal som referens.

Om du bara har börjat kan du besök lekplatsen värd på AnyCharts hemsida. Detta är ett trevligt ställe att hitta arbetsnummerprover att bryta ner syntaxen.

Eller, om du verkligen vill börja med fyrkant en då då GraphicsJS startguide kan hjälpa. Det här är mer som “officiell” dokumentation så det kommer att hålla handen för en mjukare inlärningskurva jämfört med API-dokumenten.

Hur som helst, jag älskar att GraphicsJS öppnades och släpptes ut i utvecklaren. Det är långt ifrån ett perfekt bibliotek men det är ett av de bästa vi har för skapa anpassad SVG-grafik från början.

Och för att få dina kugghjul att vrida, kan du se nedan ett exempel på vad du kan bygga med Graphics.js.