L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment créer un graphique de jauge linéaire en JavaScript
Cet article présente un guide facile à suivre pour créer un graphique à jauge linéaire interactif en JavaScript.
Nous montrerons comment créer rapidement un graphique de jauge linéaire cool et interactif qui met en évidence les données de vaccination Covid-19 dans le monde. Notre graphique nous permettra de visualiser l'état de la vaccination contre le Covid-19 au moment de la rédaction et affichera deux types de données – montrant à quelle distance nous sommes de l'objectif à mi-chemin de la vaccination partielle et complète de la population mondiale.
Qu'est-ce qu'un graphique à jauge linéaire ?
La visualisation des données est un outil inestimable, compte tenu de la grande quantité de données créées et des nombreuses possibilités de glaner des informations à partir des données. La visualisation des données est particulièrement utile pour identifier les tendances, interpréter les modèles et communiquer des idées complexes au public cible.
Un graphique à jauge linéaire représente une échelle linéaire verticale ou horizontale qui affiche les valeurs requises, avec une échelle de couleurs ainsi qu'un ou plusieurs pointeurs. Les valeurs minimales et maximales de la plage de données peuvent être définies sur les axes en fonction des données représentées. La position du pointeur indique la valeur actuelle de la métrique.
Un graphique à jauge peut afficher une ou plusieurs valeurs à l'aide d'un pointeur individuel ou d'une combinaison de marqueurs. Le pointeur peut être une aiguille ou une ligne avec un marqueur de n'importe quelle forme comme un cercle, un carré, un rectangle ou un triangle.
Le type de graphique à jauge linéaire est une représentation visuelle efficace pour afficher à quel point les valeurs sont proches ou éloignées du point de données souhaité.
Types de jauges linéaires
Les différents types de jauges linéaires sont le tableau de thermomètre, le tableau à puces, le tableau de réservoir et le tableau à LED. Le thermomètre à mercure – composé de graduations mineures qui affichent la température avec la valeur du pointeur – est un exemple classique de graphique à jauge linéaire.
La visualisation de jauge linéaire que nous allons construire
Voici un aperçu du graphique de jauge linéaire final. Suivez ce didacticiel pour savoir comment nous construisons ce graphique à jauge linéaire intéressant et informatif avec JavaScript.
Les quatre étapes pour créer une jauge linéaire JavaScript
Il est toujours utile d'avoir des compétences avec des technologies comme HTML et JavaScript. Mais dans ce didacticiel, nous utilisons une bibliothèque de graphiques JS qui facilite la création de graphiques convaincants comme la jauge linéaire, même avec des connaissances techniques minimales.
Il y a plusieursBibliothèques de graphiques JavaScriptpour visualiser facilement les données, et ici nous créons le graphique à jauge linéaire avecAnyChart . Cette bibliothèque est flexible, avecdocumentation complèteet il consiste en quelquesde bons exemples . De plus, il possède uneterrain de jeux pour expérimenter du code et est gratuit pour une utilisation non commerciale. Si vous souhaitez acheter une version sous licence, vous pouvez consulter leOptions disponibleset si vous êtes une organisation éducative ou à but non lucratif, vous pouvez nous contacter pour obtenir une licence gratuiteici.
Les étapes pour créer une jauge linéaire JavaScript
Voici les étapes de base pour créer un graphique à jauge linéaire :
- Créez une page HTML de base.
- Incluez les fichiers JavaScript nécessaires.
- Ajoutez les données.
- Écrivez le code JavaScript du graphique.
Examinons chacune de ces étapes en détail ci-dessous.
1. Créez une page HTML de base
La première chose que nous devons faire est de créer une page HTML qui contiendra notre visualisation. Nous ajoutons un
block element et donnez-lui un ID afin que nous puissions le référencer plus tard :
<html langue="dans">
<tête>
<Titre>Jauge linéaire JavaScript</Titre>
<style taper="texte/css">html,corps, #récipient{
largeur: 100%; la taille: 100%; marge: 0; rembourrage: 0;
}</style>
</tête>
<corps>
<div identifiant="récipient"></div>
</corps></html>Les attributs largeur et hauteur du
sont définis sur 100 % afin que le graphique soit affiché sur tout l'écran. Ces attributs peuvent être modifiés selon les besoins.
Source link
2. Incluez les fichiers JavaScript nécessaires
L'étape suivante consiste à référencer les liens JS dans la page HTML. Nous utiliserons la bibliothèque AnyChart pour ce didacticiel, incluons donc les fichiers correspondants à partir de leurCDN.
Pour créer un graphique à jauge linéaire, nous devrons ajouter trois scripts : lemodule de baselamodule de jauge linéaireet lemodule de table:
<html langue="dans">
<tête>
<Titre>Jauge linéaire JavaScript</Titre>
<style taper="texte/css">html,corps, #récipient{
largeur: 100%; la taille: 100%; marge: 0; rembourrage: 0;
}</style>
</tête>
<corps><div identifiant="récipient"></div>
<scénario></scénario>
<scénario src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></scénario>
<scénario src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></scénario>
<scénario src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></scénario>
</corps></html>3. Ajoutez les valeurs de données
Les données du graphique à jauge linéaire sont collectées à partir deNotre monde en données et inclus dans le code. Sur ce site, on peut voir le pourcentage des personnes ayant reçu un et deux Coviddoses de vaccinpour chaque continent dans le monde entier.
Parce que (au moment de la rédaction) aucun des nombres n'est supérieur à 50 %, nous avons maintenu la limite maximale de l'axe de toutes les jauges linéaires à 50 %, et nous comparons à quelle distance de cette marque se trouve chaque continent, ainsi que le chiffre global. Nous indiquons au moins les chiffres partiellement vaccinés avec une représentation LED, et les chiffres entièrement vaccinés avec un pointeur de barre. Nous verrons comment les données sont ajoutées dans la dernière étape.
Alors, nos premières étapes sont terminées, et maintenant ajoutons le code pour créer un graphique à jauge linéaire avec JavaScript !
4. Écrivez le code JavaScript du graphique
Avant d'ajouter du code, nous enfermons tout dans une fonction qui s'assure que tout le code qu'elle contient ne s'exécute qu'une fois la page chargée.
La création d'un graphique à jauge linéaire implique quelques étapes et est un peu plus complexe que les autres types de graphiques de base. Mais cela ne veut pas dire que c'est très difficile, et nous passerons par chaque étape pour comprendre comment le graphique est fait.
Définition de l'échelle linéaire et de l'axe du graphique de jauge
Nous avons plusieurs pointeurs dans notre graphique. Commençons donc par créer une fonction qui accepte deux valeurs : une pour le pointeur de la barre et une pour la jauge à LED. Nous allons ensuite créer une jauge, définir les données et spécifier la disposition horizontale. Ensuite, nous allons définir la plage des échelles et des axes. Nous allons créer une échelle linéaire avec les plages minimale et maximale. Pour l'axe, nous allons définir les attributs et définir l'orientation :
une fonction drawJauge(valeur,réglages) {
constantejauge=n'importe quel graphique.jauges.linéaire();jauge.Les données([valeur,réglages.valeur]);jauge.agencement('horizontal');
constanteéchelle=n'importe quel graphique.Balance.linéaire();échelle.le minimum(0).maximum(réglages.maximum).les tiques({intervalle: 2 });
constanteaxe=jauge.axe(0);axe.largeur('1%').décalage('43%').échelle(échelle).orientation('bas');
}
Réglage du pointeur de barre et de l'étiquette
Nous allons maintenant créer le pointeur de barre et l'étiquette de la série de barres. L'étiquette reçoit un décalage pour éviter le chevauchement avec le pointeur :
constantebarSérie=jauge.bar(0);barSérie.échelle(échelle)
.largeur('4%');
constantebarre d'étiquettes=barSérie.Étiquettes();barre d'étiquettes.activé(vrai)
.décalageY('-15px');
Création du pointeur LED et définition de l'attribut de couleur
Dans les points LED, nous allons spécifier l'écart entre les points et utiliser la propriété dimmer pour définir la couleur des points LED résiduels pour indiquer un effet non éclairé. Nous déclarerons également l'échelle de couleur des points LED allumés :
constanteledPointer=jauge.LED(1);ledPointer.décalage('dix%')
.largeur('30%')
.compter(réglages.maximum)
.échelle(échelle)
.écart(0,55)
.variateur(une fonction () {
retourner '#eee';
});ledPointer.Échelle de couleurs().couleurs(['#63b39b', '#63b39b']);
Déclarer les jauges avec la valeur cible de chaque point de données
Pour faire la jauge linéaire pour chaque continent, nous appellerons la fonction définie ci-dessus pour chaque région avec ses données. Le premier nombre indique les données de la valeur cible et la seconde variable est un objet avec les données de la LED. Lemaximumreste un 50 constant, tandis quevaleur est la valeur en pourcentage de la population entièrement vaccinée pour chaque point de données. Cette valeur sera affichée par le pointeur :
constantemonde= drawJauge(13.68, {maximum: 50,valeur: 27.13 });
constanteL'Europe = drawJauge(36,98, {maximum: 50,valeur: 47.28 });
constantenAmérique= drawJauge(36,77, {maximum: 50,valeur: 46,53 });
constantesAmérique= drawJauge(22,8, {maximum: 50,valeur: 40,54 });
constanteAsie= drawJauge(10.14, {maximum: 50,valeur: 27.16 });
constanteOcéanie= drawJauge(9,75, {maximum: 50,valeur: 22.12 });
constanteAfrique= drawJauge(1,56, {maximum: 50,valeur: 3.04 });
Définition de la disposition des jauges linéaires
Pour afficher chacune des jauges linéaires l'une sous l'autre, nous allons définir un tableau et ajouter le titre avec chaque point de données sur une ligne distincte. Nous ajouterons les différentes propriétés de la mise en page, telles que l'alignement et la taille de la police. Nous allons également définir des paramètres pour la première ligne, puisqu'il s'agit du titre, et définir l'attribut width de la première colonne sur 100 % puisque nous n'avons plus besoin de colonnes :
constantetable de disposition=n'importe quel graphique.autonomes.table();table de disposition.hAligner('à droite')
.vAligner('milieu')
.taille de police(14)
.cellBorder(nul);table de disposition.Contenu([
[nul, 'Vaccination Covid-19 - À quelle distance sommes-nous de la mi-parcours?'],
['Monde',monde],
['L'Europe ',L'Europe ],
['Amérique du Nord',nAmérique],
['Amérique du Sud',sAmérique],
['Asie',Asie],
['Océanie',Océanie],
['Afrique',Afrique]
]);table de disposition.getRow(0)
.la taille(50)
.taille de police(22)
.hAligner('centre');table de disposition.obtenirCol(0).largeur(100);
Dessiner le graphique
La dernière étape consiste à référencer le
conteneur que nous avons ajouté à l'étape précédente, et pour dessiner le graphique :
table de disposition.récipient('récipient');table de disposition.dessiner();
Et c'est tout. Nous avons maintenant un tableau de jauge linéaire JavaScript entièrement fonctionnel et magnifique ! Le code de cette première version de la jauge linéaire peut être consulté surCodePen.
Rendre le graphique accessible
C'est toujours une bonne pratique de s'assurer que les graphiques sont accessibles au plus grand nombre. Donc, en gardant tout à l'esprit, nous avons créé une version de base du graphique à jauge linéaire qui convient mieux aux lecteurs d'écran. Vous pouvez vérifier ceciiciet en savoir plus sur cet aspect dans leDocumentationde la bibliothèque JavaScript AnyChart.
Personnalisation de la jauge linéaire
Le graphique à jauge linéaire par défaut que nous avons créé semble génial en ce moment, mais quelques modifications amélioreront la lisibilité et rendront le graphique encore plus impressionnant. Les bibliothèques JavaScript sont parfaites non seulement pour créer rapidement des graphiques, mais aussi pour personnaliser les visualisations selon les besoins. Les bibliothèques de graphiques offrent de nombreuses options de configuration pour contrôler le comportement et l'esthétique des graphiques. Apportons quelques modifications mineures mais efficaces à notre graphique à jauge linéaire actuel.
Changement de couleur
Pour rendre la jauge linéaire plus cohérente, faisons de l'attribut de couleur du pointeur de la barre une version plus sombre des points LED. Nous le ferons en spécifiant les attributs fill et stroke de la barre :
constantebarSérie=jauge.bar(0);barSérie.échelle(échelle)
.largeur('4%')
.remplir('#296953')
.caresser('#296953');
Ajout d'une légende à notre graphique à jauge linéaire
Étant donné que nous avons utilisé différentes couleurs pour la barre, les pointeurs LED allumés et non allumés, il est recommandé de fournir une légende pour expliquer les couleurs. Nous allons créer une légende et l'ajouter sous le titre du graphique :
constanteLégende=n'importe quel graphique.autonomes.Légende();Légende.position('centre')
.éléments([
{texte: "Entièrement vacciné",icôneRemplir: '#296953' },
{texte: "Partiellement vacciné",icôneRemplir: '#63b39b' },
{texte: "Pas vacciné",icôneRemplir: '#eee' }
]);
Formatage des info-bulles
Pour faciliter une meilleure communication des données, formatons l'info-bulle pour la rendre plus informative en affichant les valeurs sous forme de pourcentage et en indiquant que la valeur maximale de la jauge est de 50 % :
jauge.info-bulle()
.utiliserHtml(vrai)
.titreFormat('{%Valeur} %')
.format(
'Maximum à l'échelle : ' +réglages.maximum +
'%'
);
Découvrez le code complet de cette version surCodePen.
Formatage des axes et des étiquettes
La dernière chose que nous ferons est d'afficher toutes les valeurs de données sous forme de pourcentages pour éviter toute confusion. Nous ajouterons également un sous-titre sous forme de ligne dans le tableau sous le titre pour indiquer que les valeurs sont des pourcentages. Une dernière chose sera d'embellir les étiquettes des barres avec des polices plus audacieuses.
Le code final complet de ce graphique de jauge linéaire JavaScript peut être trouvé surCodePen.
Voir le stylo
Jauge linéaire (JS) – finalepar SitePoint (@SitePoint)
surCodePen.
Conclusion
Dans ce tutoriel étape par étape, nous avons vu comment créer des graphiques JavaScript fonctionnels et visuellement attrayants n'est pas trop difficile avec une bonne bibliothèque JavaScript. Consultez la documentation et les exemples pour mieux comprendre les caractéristiques et les propriétés de la jauge linéaire. Veuillez poser des questions en cas de doute sur ce graphique ou d'autres visualisations.
Il existe plusieurs options de graphique fournies parAnyChartet il existe de nombreuses autres bibliothèques de graphiques JavaScript pour créer de belles visualisations.
Faisons tous vacciner et restons en bonne santé pour continuer à créer plus de visualisations !
Source link