Ehita D3-ga kiiresti dünaamilised graafikud Plottable.js-iga

Tasuta D3.js raamatukogu on vaid üks paljudest, mis võimaldab teil luua interaktiivne graafika lehel. Kuigi D3 on võib-olla kõige populaarsem kobaras, ei ole õppimine seda lihtne teha.

Sellepärast Plottable.js on selline väärtuslik raamatukogu. See on tasuta avatud lähtekoodiga projekt ehitatud D3.js, lihtsamaks igaühe loomine interaktiivsed andmete graafikud nullist.

See raamatukogu tegeleb kogu määrdunud tööga, nii saate keskenduda spetsiifilistele andmetele, näiteks andmetele. Plotitav genereerib õige koodi iga valitud kaardi suuruse ja asukoha kohta.

Iga diagramm on oma komponent Plottable'is, kus saate kopeerige / kleepige malli kood diagrammi enda ülesehitamiseks. Sellest kirjutamisest saad valida 10 graafi graafiku stiili, sealhulgas ribadiagrammid, pirukaardid, hajumise krundid ja piirkonna krundid.

Sa saad taastada komponendid eraldi ja kohandada oma seadeid dünaamiliselt. Nii saate hõlpsasti muuta interaktiivseid elemente, värve, animatsioone, paigutusi, suurusi ja muud, mida vajate.

The täielik raamatukogu on saadaval GitHubis, kui soovite lähtekoodi sirvida ja koopia alla laadida.

Kuid parim viis õppida on näite kaudu. Sellepärast peaksite nende vaatama näidisgraafikud, mis töötavad Plottable'iga näha, kuidas see toimib.

Iga graafik on täielikult interaktiivne, lähtekoodiga käivitamiseks. Kui soovite sarnase graafi üles ehitada, kopeerige / kleepige JS-kood ja vormindage vastavalt vajadusele.

Mul on oma saidilt kaks isiklikku lemmikut: Kalendri Heatmap modelleeritud pärast GitHubi tegevustahvlit ja Sünkroonitud diagrammid dünaamilise valikuga.

Kui te pole kunagi varem D3.js-i kasutanud, siis te seda raamatukogu õppida. Eriti, sest see on kirjutatud TypeScript, nii et sa tahad ilmselt ka selle üles valida. Viimane kood on ES5 JavaScripti, nii see peaks töötama kõigis suuremates brauserites.

Kui olete valmis sukelduma, vaadake neid Juhendite leht täis käepäraseid ressursse. Sa õpid kõike, mida vajate Plottable'i ja selle alustamiseks luua dünaamilisi veebipõhiseid graafikuid algusest.