D3 dinamiskā grafika izveidošana ar Plottable.js

Bezmaksas D3.js bibliotēka ir tikai viens no daudzajiem, kas ļauj jums izveidot interaktīvu grafiku lapā. Lai gan D3, iespējams, ir populārākais ķekars, mācīšanās lietot to nav viegls uzdevums.

Tāpēc Plottable.js ir tik vērtīga bibliotēka. Tas ir bezmaksas atklātā pirmkoda projekts uzbūvēta virs D3.js, lai ikvienam būtu vieglāk izveidot interaktīvie datu grafiki no nulles.

Šī bibliotēka apstrādā visus netīro darbu, lai jūs varētu koncentrēties uz specifiku, piemēram, datiem. Plotējams ģenerē pareizu kodu par jebkuras izvēlētās diagrammas izmēru un atrašanās vietu.

Katra diagramma ir savs komponents , kur jūs varat kopējiet / ielīmējiet veidnes kodu atjaunot diagrammu pats. Sākot ar šo rakstīšanu, varat izvēlēties 10 parauglaukumu diagrammu stili, ieskaitot joslu diagrammas, sektoru diagrammas, izkliedēšanas laukumus un laukuma gabalus.

Jūs varat atjaunot komponentus atsevišķi un pielāgot savus iestatījumus dinamiski. Tādā veidā jūs varat viegli nomainīt interaktīvos elementus, krāsas, animācijas, pozicionēšanas, izmērus un citu, kas jums nepieciešams.

The pilna bibliotēka ir pieejams GitHub, ja vēlaties pārlūkot avota kodu un lejupielādēt kopiju.

Bet labākais veids, kā mācīties, ir piemērs. Tāpēc jums vajadzētu apskatīt viņu paraugu diagrammas, kurās darbojas Plottable lai redzētu, kā tas darbojas.

Katrs grafiks ir pilnībā interaktīva, ar avota kodu, lai sāktu. Ja vēlaties atjaunot līdzīgu grafiku, vienkārši kopējiet / ielīmējiet JS kodu un pēc vajadzības pārformatējiet.

Man ir divi personīgie favorīti no savas vietnes: Kalendārs Heatmap modelēts pēc GitHub darbības plāna un Sinhronizētas diagrammas ar dinamiskām atlases funkcijām.

Ja jūs nekad neesat lietojis D3.js pirms tam, jums būs grūti mācīties šo bibliotēku. Jo īpaši, jo tas ir rakstīts TypeScript, tāpēc jūs, iespējams, vēlēsieties arī to izvēlēties. Pēdējais kods ir apkopoti ES5 JavaScript, tā būtu darbojas visās galvenajās pārlūkprogrammās.

Ja esat gatavs ienirt, apskatiet viņu Pamācības lapa pilns ar ērtiem resursiem. Jūs uzzināsiet visu, kas nepieciešams, lai sāktu darbu ar Plottable un izveidot dinamiskas tīmekļa diagrammas no nekā.