Sukurkite „Dynamic Graphs“ greitai D3 su „Plottable.js“

Laisvas D3.js biblioteka yra tik vienas iš daugelio, kuris leidžia jums sukurti interaktyvią grafiką puslapyje. Nors D3 yra populiariausias iš krūva, mokymasis jį naudoti nėra lengva užduotis.

Štai kodėl Plottable.js yra tokia vertinga biblioteka. Tai nemokamas atviro kodo projektas pastatytas ant D3.js, kad kiekvienas galėtų lengviau kurti interaktyvūs duomenų grafikai nuo nulio.

Ši biblioteka tvarko visus nešvarius darbus, todėl galite sutelkti dėmesį į konkrečius duomenis, pvz., duomenis. Įrašomas generuoja tinkamą kodą už bet kurio pasirinkto diagramos dydį ir padėtį.

Kiekviena diagrama turi savo komponentą į Plottable, kur galite nukopijuokite / įklijuokite šablono kodą atnaujinti diagramą. Nuo šio rašymo galite pasirinkti iš 10 brėžinių diagramų stilių, įskaitant juostų diagramas, pyragų diagramas, sklaidos sklypus ir plotų sklypus.

Tu gali atkurti komponentus atskirai ir pritaikyti savo nustatymus dinamiškai. Tokiu būdu galite lengvai keisti interaktyvius elementus, spalvas, animacijas, pozicionavimus, dydžius ir ką nors, ko jums reikia.

The visa biblioteka galima rasti „GitHub“, jei norite naršyti šaltinio kodą ir atsisiųsti kopiją.

Tačiau geriausias būdas mokytis yra pavyzdys. Štai kodėl turėtumėte pažvelgti į jų pavyzdžių grafikai, kuriuose veikia „Plottable“ pamatyti, kaip jis veikia.

Kiekvienas grafikas yra visiškai interaktyvus, su pradinio kodo įkrovimu. Jei norite atkurti panašų grafiką, tiesiog nukopijuokite / įklijuokite JS kodą ir, jei reikia, performatuokite.

Turiu du asmeninius mėgstamus iš savo svetainės: Kalendoriaus „Heatmap“ modeliuojama po GitHub veiklos lentos ir Sinchronizuoti diagramos su dinaminėmis atrankos funkcijomis.

Jei anksčiau niekada nenaudojote D3.js, jums bus sunku išmokti šią biblioteką. Ypač, nes tai parašyta „TypeScript“, todėl jūs tikriausiai norėsite pasiimti tą patį. Galutinis kodas yra į ES5 „JavaScript“, taip turėtų dirbti visose pagrindinėse naršyklėse.

Jei esate pasiruošęs nardyti, pažiūrėkite į jų Pamokos puslapis pilna patogių išteklių. Jūs sužinosite viską, ko jums reikia norint pradėti naudoti „Plottable“ ir „“ kurti dinaminius internetinius grafikus nuo nulio.