9 bibliothèques Javascript pour construire des graphiques interactifs

Vous avez donc entre les mains des tonnes de données, avec un certain nombre de variables, que vous devez en quelque sorte relayer à quelqu'un d'autre. Il leur sera difficile de comprendre les données brutes et non organisées. C'est pourquoi vous avez besoin de l'aide des graphiques. Dans la conception web, les graphiques sont l'un des meilleurs outils de visualisation des données. Il est facile à lire, agréable pour les yeux et relativement facile à configurer.

Mais prenons les choses un cran: ajouter de l'animation et de l'interactivité à ces graphiques, afin que les lecteurs puissent non seulement apprendre quelque chose de nouveau à partir du tableau, mais aussi jouer avec. C'est en fait plus facile qu'il n'y paraît, grâce à un certain nombre de bibliothèques JS. Vérifions-les.

1. Graphique JS

Chart.js est une bibliothèque sans dépendance qui permet de créer des graphiques en 6 types différents: graphiques linéaires, graphiques à barres, graphiques radar, graphiques de zones polaires, camemberts et graphiques en anneau. La bibliothèque est également divisée en fonction du type de graphique afin que vos pages ne s'embourbent pas avec ce qui n'est pas nécessaire. Il prend en charge la conception réactive et vous pouvez facilement modifier des variables telles que la couleur ou l'animation pour personnaliser l'interface graphique..

2. Chartist JS

Chartist JS est une excellente bibliothèque pour créer des graphiques réactifs utilisant SVG. Outre sa réactivité, Chartist vous offre de la flexibilité en utilisant une séparation claire des préoccupations: style avec CSS et contrôle avec JS. Pour faciliter la personnalisation, les fichiers SASS sont inclus. La grande chose ici est que vous avez des options illimitées pour animer votre graphique en utilisant l'API d'animation Chartist, SMIL, qui vous donne des options d'animation supplémentaires..

3. C3 JS

C3 JS est une bibliothèque pour construire des graphiques basés sur D3 JS. Il encapsule le code requis pour créer des graphiques avec D3 JS, vous permettant ainsi d’éviter d’écrire le code D3 et de simplement saisir vos données. C3 est livré avec une variété d’API que vous pouvez utiliser pour contrôler facilement vos graphiques. Pour personnaliser votre graphique, définissez vos propres styles personnalisés pour les classes CSS données. Construisez des graphiques à partir de simples graphiques linéaires pour évaluer des graphiques. Consultez cette page pour voir comment fonctionne la bibliothèque.

4. Flot

Flot est un outil jQuery permettant de créer des graphiques avec des éléments interactifs, tels que l’activation ou la désactivation d’une série, les interactions de points de données, le panoramique, le zoom, etc. Flot est livré avec une variété d'options de types de graphiques et si vous voulez plus de capacités sur votre graphique, voici quelques plugins que vous pouvez également utiliser. Les graphiques fonctionneront bien avec les navigateurs prenant en charge les canevas HTML..

5. EChart

Echart est une bibliothèque étonnamment complète en provenance de Chine qui prend en charge plusieurs types de graphiques, peut traiter des données volumineuses (tracer jusqu'à 200 000 points de données sur un graphique cartésien). un pour passer facilement d'un type de données à un autre, et beaucoup plus.

6. la pitié

La pitié ajoutera un mini graphique à votre page Web. C'est un petit plugin jQuery qui transforme un élément en mini svg ligne, barre, beignet ou camembert. Vous devez juste créer un élément et donner une valeur comme 1/5 et faire un appel peity ("tarte") sur cet élément pour faire un mini camembert. Par exemple, pour créer un graphique en anneau dont le cinquième est mis en surbrillance, voici le code HTML:

1/5

Vous pouvez personnaliser la couleur, le rayon, la largeur et la hauteur du graphique, mais par défaut, il est affiché en petite taille..

7. DC JS

DC JS a des similitudes avec C3 JS en termes de moteur utilisé; ils utilisent tous deux la bibliothèque D3 pour rendre les graphiques en SVG. DC JS est créé pour vous aider à visualiser les données et les analyses pour les navigateurs et les appareils mobiles. Comme il exploite le D3 JS, il vous permet d’ajouter une interaction utilisateur à votre graphique. DC JS est une bibliothèque puissante pour créer des graphiques allant de la plus simple à la plus complexe.

8. Google Chart

Vous pouvez créer des graphiques interactifs et des outils de données à l'aide de l'API de visualisation de Google via Google Chart. Il existe des galeries de graphiques pour vérifier les capacités de visualisation des données de Google Chart. Pour commencer, intégrez du code JavaScript simple à votre page Web pour charger les bibliothèques Google Chart dont vous avez besoin. Ensuite, répertoriez les données que vous souhaitez cartographier et effectuez certaines personnalisations à l'aide des options de graphique. Enfin, créez un objet graphique avec un identifiant et, sur votre page Web, créez un

avec cet identifiant pour afficher votre graphique.

9. NVD3

NVD3 est un ensemble de diagrammes réutilisables et de composants de diagramme construits avec D3 JS. Cette bibliothèque est donc un "modèle" qui facilitera la création de graphiques. Découvrez les nombreux exemples de graphiques construits avec NVD3 ici.

Maintenant lu: Bibliothèques JavaScript pour créer des cartes interactives et personnalisées