Izveidojiet JavaScript darbinātas datu diagrammas ar Billboard.js

Grafikai un vizuālajiem materiāliem ir būtiska nozīme tīmekļa satura uzlabošanā. Ar modernām tehnoloģijām savā lapā ir viegli pievienot pielāgotus attēlus, piemēram, SVG ikonas.

Bet vēl viens pārsteidzošs vizuālais, ko varat veidot no nulles, ir tīmekļa diagramma.

Tas var jums palīdzēt attēlus vizuāli lai jūsu apmeklētāji var ātri sašķelt attiecīgo informāciju. Un nevis grafika kodēšanas vietā jūs varat izmantot bibliotēku, piemēram, Billboard.js, lai veiktu visu smago pacelšanu.

Tas faktiski tiek veidots uz D3 virsmas, kas ir JavaScript datu vizualizācijas bibliotēka. Tas ir viegli populārākais tur, kas padara to par drošāko atkarību, ko jūs varētu lūgt.

Ar Billboard.js varat ātri un viegli piekļūt D3 API. Billboard galvenais mērķis ir lietošanas ērtumu, padarot to pieejamu ikvienam. Lai gan tas palīdz iegūt kādu pieredzi ar JavaScript, jums noteikti nav jābūt ekspertiem.

Vienkārši ņemiet vērā, ka visa koda bāze izmanto ES6 sintaksi, kas var sajaukt ar mazāk pieredzējušiem JS deviem.

Tik ilgi, cik jūs zina, kā sastādīt kodu jums vajadzētu būt labi. Ja vēlaties uzzināt vairāk, mēs faktiski sedzējām dažas no ES6 karstajām funkcijām.

Visi tehniskie dati par šo spraudni var likties jauki. Bet jūs droši vien vienkārši vēlaties zināt ko tas var darīt.

Apskatiet demonstrācijas lapu un noklikšķiniet uz dažiem tiešajiem piemēriem.

Jūs atradīsiet visu, sākot no pīķa diagrammām, lai izkaisītu laukumus un pielāgotas animācijas joslu diagrammas.

Ar Billboard.js jums ir pilnīga kontrole pār jūsu datiem. Jūs kontrolējat, kā tas parādās lapā, kā tas ir strukturēts, un kāda veida UI / UX funkcijas jūs pievienojat (ja tādas ir).

Tas ir patiešām fantastisks diagrammas bibliotēka, un tas ir viens no vienkāršākajiem. Iepazīstieties ar projekta GitHub repo, lai uzzinātu vairāk.

Jūs varat arī ielauzties šajā fragmentā par CodePen, ja vēlaties pārlūkprogrammā spēlēt kodu.