Crea grafici di dati basati su JavaScript con Billboard.js

Grafica e grafica svolgono un ruolo fondamentale nel miglioramento dei contenuti web. Con la tecnologia moderna è così facile aggiungere immagini personalizzate come icone SVG nella tua pagina.

Ma un'altra visuale sorprendente che puoi costruire da zero è una carta web.

Questo può aiutarti grafico i dati visivamente così i tuoi visitatori possono velocemente scremare le informazioni pertinenti. E invece di scrivere un grafico tu stesso puoi usare una libreria come Billboard.js per fare tutto il lavoro pesante.

Questo è in realtà costruito su D3, che è una libreria di visualizzazione dei dati JavaScript. È facilmente il più popolare là fuori, rendendolo la dipendenza più sicura che si possa desiderare.

Con Billboard.js puoi accedere all'API D3 in modo rapido e semplice. L'obiettivo principale di Billboard è facilità d'uso, rendendolo accessibile a chiunque. Anche se è utile avere qualche esperienza con JavaScript, non devi certamente essere un esperto.

Basta notare che l'intero codebase utilizza la sintassi ES6 che può essere fonte di confusione per gli sviluppatori JS meno esperti.

Finchè sapere come compilare il codice dovresti stare bene. In realtà abbiamo coperto alcune caratteristiche interessanti di ES6, se vuoi saperne di più.

Tutti i dettagli tecnici su questo plugin possono sembrare carini. Ma probabilmente lo vuoi sapere cosa può fare.

Dai un'occhiata alla pagina demo e fai clic su alcuni esempi dal vivo.

Troverai di tutto, dai grafici a torta ai grafici a dispersione e ai grafici a barre animati personalizzati.

Con Billboard.js hai pieno controllo sui tuoi dati. Puoi controllare come appare sulla pagina, come è strutturato e quale tipo di funzionalità UI / UX aggiungi (se ce ne sono).

È davvero una fantastica libreria di carte ed è una delle più facili da raccogliere. Dai un'occhiata al repository GitHub del progetto per saperne di più.

Puoi anche inserire questo snippet su CodePen se vuoi giocare con il codice nel tuo browser.