Créer des graphiques de données JavaScript avec Billboard.js

Les graphiques et les éléments visuels jouent un rôle essentiel dans l'amélioration du contenu Web. Avec la technologie moderne, il est si facile d'ajouter des visuels personnalisés tels que des icônes SVG dans votre page..

Mais un autre visuel surprenant que vous pouvez créer à partir de zéro est un graphique Web..

Cela peut vous aider tracer les données visuellement afin que vos visiteurs puissent rapidement parcourir les informations pertinentes. Et plutôt que de coder vous-même un graphique, vous pouvez utiliser une bibliothèque telle que Billboard.js pour faire le gros du travail..

Ceci est en fait construit sur D3 qui est une bibliothèque de visualisation de données JavaScript. C’est facilement la plus populaire, ce qui en fait la dépendance la plus sûre que vous puissiez demander..

Avec Billboard.js, vous pouvez accéder à l’API D3 rapidement et facilement. Le but principal de Billboard est facilité d'utilisation, le rendant accessible à tout le monde. Bien qu'il soit utile d'avoir une certaine expérience de JavaScript, vous n'avez certainement pas besoin d'être un expert..

Il suffit de noter que toute la base de code utilise la syntaxe ES6, ce qui peut prêter à confusion pour les développeurs JS moins expérimentés..

Tant que tu savoir comment compiler le code ça devrait aller. Nous avons en fait couvert quelques nouveautés de ES6 si vous voulez en savoir plus..

Tous les détails techniques sur ce plugin peuvent sembler bien. Mais vous voulez probablement juste savoir ce que cela peut faire.

Consultez la page de démonstration et cliquez sur certains des exemples en direct..

Vous trouverez tout, des graphiques à secteurs aux diagrammes de dispersion et des graphiques à barres animés personnalisés..

Avec Billboard.js vous avez contrôle total sur vos données. Vous contrôlez son apparence sur la page, sa structure et le type de fonctionnalités UI / UX que vous ajoutez (le cas échéant)..

C'est vraiment une bibliothèque de graphiques fantastique et l'une des plus faciles à prendre en main. Consultez le référentiel GitHub du projet pour en savoir plus..

Vous pouvez également creuser cet extrait de CodePen si vous voulez jouer avec le code de votre navigateur..