Luo JavaScript-Powered Data Charts Billboard.js n avulla

Grafiikalla ja visuaalilla on tärkeä rooli web-sisällön parantamisessa. Nykyaikaisen tekniikan avulla on niin helppoa lisätä omia visuaalisia kuvia, kuten SVG-kuvakkeita.

Mutta toinen yllättävä visuaalinen, jonka voit rakentaa tyhjästä, on web-kaavio.

Tämä voi auttaa sinua kuvaa kuvaa visuaalisesti joten kävijät voivat nopeasti pilata asiaan liittyviä tietoja. Ja sen sijaan, että kuvastaisit kuvaajan itse, voit käyttää Billboard.js: n kaltaista kirjastoa tekemään kaiken raskaan nostamisen.

Tämä on todella rakennettu D3: n päälle, joka on JavaScript-tietojen visualisointikirjasto. Se on helposti suosituin, joten se on turvallisin riippuvuus, jota voit pyytää.

Billboard.js: n avulla voit käyttää D3 API: ta nopeasti ja helposti. Billboardin ensisijainen tavoite on helppokäyttöisyys, minkä ansiosta se on kaikkien saatavilla. Vaikka se auttaa saamaan kokemusta JavaScriptista, sinun ei tarvitse olla asiantuntija.

Huomaa, että koko koodisarja käyttää ES6-syntaksia, joka voi olla hämmentävää vähemmän kokeneille JS-yksiköille.

Niin kauan kuin sinä osaa koota koodi sinun pitäisi olla kunnossa. Itse asiassa katselimme muutamia kuumia ominaisuuksia ES6: sta, jos haluat lisätietoja.

Kaikki tämän pluginin tekniset tiedot saattavat tuntua hyvältä. Mutta luultavasti haluat vain tietää mitä tämä voi tehdä.

Tutustu esittelysivulle ja klikkaa joitakin live-esimerkkejä.

Löydät kaiken piirakuvioista haarautumiskuvioihin ja mukautettuihin animaatioihin.

Kun sinulla on Billboard.js hallita kaikkia tietojasi. Voit hallita, miten se näkyy sivulla, miten se on strukturoitu ja millaisia ​​UI / UX-ominaisuuksia lisäät (jos sellaisia ​​on).

Se on todella loistava karttakirjasto ja se on yksi helpoimmista poimia. Tutustu hankkeen GitHub-repoon saadaksesi lisätietoja.

Voit myös kaivaa tähän koodinpätkän koodiin, jos haluat pelata koodia selaimessasi.