GraphicsJS võimaldab teil luua iga veebi graafika, mida saate kujutada

Kohandatud JavaScript API-d on veebi tulevik. The avatud lähtekoodiga liikumine koos SVG-graafika on avanud veebiarendajate võimalused.

GraphicsJS on tasuta avatud lähtekoodiga raamatukogu ja JS API jaoks kohandatud graafika loomine veebibrauserites. Seda saab kasutada kui a visualiseerimise tööriist andmete kokkuvõtmiseks või seda saab kasutada jahedate asjade valmistamiseks lihtsalt näitama.

Kodulehel leiate a suur osa demosid loodud graafikaga GraphicsJS. Ja need näited lihtsalt kriimustavad selle, mis on võimalik.

Raamatukogu kasutab oma virtuaalset DOM-i mis on brauseri DOM abstraktsioon. See on mõnevõrra sarnane Reacti virtuaalsele DOM-ile ja seda kasutatakse sarnaselt.

Kuna see raamatukogu kasutab DOMi klooni, siis ka see vajab tõelist HTML-elementi töötada. Sellepärast kasutab SVG / VML pigem HTML5 lõuendist kui varjatud objekte.

See graafikamootor oli algselt ehitatud AnyCharti raamatukogusse. Sealt oli see kõverdatud ja avatud JS API.

GraphicsJS toetab kõiki peamisi brausereid, isegi IE6 ja Chrome 1.0 versioonist.

Kogu lähtekood on saadaval GitHub repos, kus saate aega alla laadida ja kopeerida. Aga ma arvan, et parim viis õppida on sukelduda peaga.

Saate sirvida API dokumendid kuid tavaliselt leian, et need dokumendid on üleliigsed. Dokumendid on kõige parem kasutada, kui seda vajate leidke konkreetne meetod või API-kõne viidata.

Kui sa lihtsalt alustad, saate seda teha külastage mänguväljakut mis on majutatud AnyCharti veebisaidil. See on tore koht leida töökoodide näidised süntaksit lõhkuda.

Või kui sa tõesti tahad alustada ruudust, siis GraafikaJS algusjuhend võib aidata. See on rohkem nagu “ametnik” dokumentatsioon, nii et see hoiab teie kätt a sujuvam õppekõver võrreldes API-dokumentidega.

Mõlemal juhul, ma armastan seda, et GraphicsJS oli avatud ja arendaja kogukonda jõudnud. See pole kaugeltki täiuslik raamatukogu, kuid see on üks parimaid kohandatud SVG-graafika loomine nullist.

Ja kui soovite oma käiku pöörata, näete allpool näidist sellest, mida saate Graphics.js'iga ehitada.