Évaluations de l’éditeur : Évaluations des utilisateurs : [Total : 0 Moyenne : 0].ilfs_responsive_below_title_1 { width : 300px ; } @media(min-width : 500px) {.ilfs_responsive_below_title_1 { largeur : 300px ; } } @media(min-width : 800px) {.ilfs_responsive_below_title_1 { largeur : 336px ; } }
Chartist est une bibliothèque de génération de graphiques SVG open source gratuite que l’on peut utiliser. Il est très avancé et prend en charge la génération de nombreux graphiques avec de nombreux paramètres. Avec cela, vous pouvez générer des graphiques colorés de n’importe quelle taille et les mettre sur votre site Web. Il prend même en charge l’animation à l’aide de CSS et ainsi, avec l’aide de cette bibliothèque, vous pourrez générer des graphiques et des graphiques animés.
Lors de la création de tableaux de bord et de pages Web pour afficher des données liées à des rapports, vous avez besoin de graphiques. Souvent, ils devaient être dynamiques ou statiques. Il existe des outils pour cela, mais pas comme Chartist. Celui-ci est probablement unique en son genre. Il est livré avec une documentation très détaillée et de très bons exemples pour que vous puissiez apprendre à générer des graphiques assez rapidement.
Liste des types de graphiques pris en charge par Chartist :
Graphique à barres (empilés et horizontaux, y compris) Graphique linéaire Diagramme à secteurs Diagramme en aires Diagramme en anneau Diagramme de jauge Diagramme de dispersion linéaire Chemin SVG animé Diagramme linéaire bipolaire Série chronologique
Caractéristiques des graphiques générés par Chartist :
Configuration extrêmement réactive. Placement des étiquettes Étiquettes multilignes Barres superposées pour le mobile Trous dans les données Animation CSS Animation SVG Animations SMIL avancées Prise en charge des plugins
Comment utiliser Chartsit pour générer des graphiques SVG ?
Il existe plusieurs façons d’utiliser cette bibliothèque. Selon le type de développeur frontend que vous êtes, vous pouvez l’utiliser. Il se présente sous la forme d’un module Node ainsi que d’un fichier de script intégrable que vous pouvez servir directement sur HTML via CDN.
Pour plus de simplicité, vous pouvez l’utiliser assez facilement dans des documents HTML. Il vous suffit d’importer ces fichiers dans la section
de votre site Web. https ://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsAprès avoir lié les bibliothèques, il vous suffit d’écrire un élément
Maintenant, ajoutez une balise de script qui générera réellement le graphique dans le conteneur spécifié. C’est en fait très simple. Si vous connaissez très bien JavaScript, vous pouvez parcourir la documentation pour voir comment générer un code personnalisé graphique. À des fins de démonstration, vous pouvez simplement utiliser le code suivant. Ajoutez-le juste en dessous de l’élément
Vous avez presque terminé maintenant. Ouvrez simplement le fichier HTML dans le navigateur. Le graphique sera généré maintenant pour vous. Vous pouvez jouer avec le code JS pour générer un graphique personnalisé basé sur différentes données. De plus, vous pouvez générer un autre type de graphique de cette manière.
La documentation sur le site Web principal de Chartist est très bien détaillée. Il contient de nombreux exemples, même sur la façon de créer des graphiques animés. En tant que développeur front-end, vous devrez parcourir cette documentation pour générer un graphique. Et avec un peu de code, vous pouvez même les rendre également exportables.
Réflexions finales :
Je dois dire que Chartist est un bijou d’outil permettant aux développeurs et aux concepteurs d’intégrer des graphiques personnalisés dans mise en scène ainsi que site web en production. C’est très simple et vous n’avez pas vraiment besoin d’écrire un très long morceau de code à moins que vous n’en créiez pas vraiment complexe. Le référentiel GitHub compte déjà plus de 10 000 étoiles, ce qui est en soi une grande réussite.
