Construire un graphique à barres en CSS
Construire un graphique à barres en CSS
Toutes les visualisations n'ont pas besoin d'une lourde bibliothèque de graphiques. Pour de nombreux tableaux de bord, quelques divs stylées suffisent à créer un graphique à barres net, rapide à charger et entièrement sous votre contrôle.
Dans cette leçon, vous allez construire un graphique à barres vertical en HTML pur et Tailwind. Chaque barre n'est qu'une div colorée dont la hauteur correspond à sa valeur, et une légende relie les couleurs à leur signification.
Pour un analyste, cette technique vaut de l'or : vous pouvez insérer un graphique propre dans n'importe quel rapport, sans dépendances, et vous comprenez exactement comment chaque pixel correspond à vos données. Dessinons quelques barres.
Instructions
Ajoutez un titre h1 « Revenus trimestriels » pour que les lecteurs sachent ce que représentent les barres.
Indice : Utilisez : `<h1 class="text-3xl font-bold mb-2">Revenus trimestriels</h1>`.
Où faut-il écrire ça ?
<!-- Construisez votre graphique à barres ici -->Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.
Créez la zone de tracé du graphique : une ligne flex dont les barres reposent sur une ligne de base grâce à items-end.
Ajoutez des barres colorées : des divs avec une hauteur en style inline et la couleur bg-purple-500.
Ajoutez une légende qui explique les couleurs, avec notamment le libellé « Trimestre record ».
Votre code
Décrivez ce que vous voulez créer pour cette étape et je rédige le code — puis cliquez sur Appliquer pour l'insérer dans votre éditeur. Cette étape : Ajoutez un titre h1 « Revenus trimestriels » pour que les lecteurs sachent ce que représentent les barres.