Construiți grafice dinamice rapid pe D3 cu Plottable.js

Liberul D3.js bibliotecă este doar unul dintre multe care vă permite creați grafică interactivă pe pagină. În timp ce D3 este probabil cea mai populară din grup, învățarea să o folosească nu este o sarcină ușoară.

De aceea Plottable.js este o bibliotecă atât de valoroasă. Este un proiect open-source gratuit construit pe partea de sus a D3.js, ceea ce face mai ușor pentru oricine să creeze grafice interactive de date de la zero.

Această bibliotecă se ocupă de toate lucrările murdare, astfel încât să vă puteți concentra asupra specificului, cum ar fi datele. plottable generează codul corespunzător pentru dimensiunea și poziția oricărei diagrame pe care o alegeți.

Fiecare diagramă are Componenta proprie în Plottable unde poți copiați / inserați codul șablonului pentru a reconstrui graficul pe cont propriu. De la această scriere, puteți selecta de la 10 stiluri de diagramă grafică, inclusiv grafice de bare, plăci grafice, parcele de împrăștiere și parcele de zonă.

Poti reconstrui Componentele în mod individual și personalizați setările dinamic. În acest fel, puteți modifica cu ușurință elementele interactive, culorile, animațiile, poziționările, dimensiunile și orice altceva de care aveți nevoie.

Biblioteca completă este disponibil pe GitHub dacă doriți să răsfoiți codul sursă și să descărcați o copie.

Dar cel mai bun mod de a învăța este prin exemplu. De aceea ar trebui să te uiți la ei eșantioane grafice care rulează Plottable pentru a vedea cum funcționează în acțiune.

Fiecare grafic este complet interactiv, cu codul sursă pentru boot. Dacă doriți să reconstruiți un grafic similar, copiați / inserați codul JS și reformatați după cum este necesar.

Am două favorite personale de pe site - ul lor: Calendarul Heatmap modelat după tabloul de activitate al lui GitHub și Diagrame sincronizate cu caracteristici dinamice de selectare.

Dacă nu ați mai folosit D3.js înainte, atunci veți încerca să învățați această bibliotecă. Mai ales pentru că este scrise în TypeScript, astfel încât probabil veți dori să alegeți și asta. Codul final este compilați în JavaScript ES5, așa ar trebui lucrați în toate browserele importante.

Dacă sunteți dispus să vă scufundați, aruncați o privire asupra lor Tutoriale pagina plin de resurse utile. Veți învăța tot ce aveți nevoie pentru a începe cu Plottable și pentru creați grafice dinamice bazate pe web de la zero.