Tutoriel complet pour apprendre à réaliser un histogramme en HTML avec une légende. Cette infographie également connue sous le nom de diagramme à bâton sera entièrement réalisée en HTML grâce à l’élément SVG. Nous ajouterons du Javascript pour rendre cet histogramme dynamique au survol de la souris en faisant apparaitre la légende.
Qu’est ce qu’un histogramme ?
Un histogramme est un graphique composé de colonnes. Chaque colonne représente une valeur. Plus la colonne est haute, plus la valeur est grande. Les histogrammes aident à voir comment les données sont réparties et si elles suivent un modèle particulier. On peut les utiliser pour comparer différentes données ou voir comment elles évoluent avec le temps.
Qu’est ce qu’un SVG ?
Un SVG contient une image vectorielle. Les images vectorielles sont des graphiques faits de formes comme des lignes et des courbes, plutôt que de points ou de pixels. SVG signifie Scalable Vector Graphics, ce qui signifie que ces images peuvent être agrandies ou réduites sans perdre de qualité. Les SVG sont couramment utilisés sur le web pour créer des graphiques et des illustrations interactifs.
Un histogramme en HTML
Histogramme HTML avec SVG – Ventes Mensuelles
La structure de l’histogramme en HTML
<!-- Histogramme -->
<section>
<h4>Histogramme HTML avec SVG - Ventes Mensuelles</h4>
<svg width="385" height="400">
<!-- Axe des ordonnées -->
<line x1="50" y1="50" x2="50" y2="350" stroke="black" stroke-width="2" />
<!-- Axe des abscisses -->
<line x1="50" y1="350" x2="550" y2="350" stroke="black" stroke-width="2" />
<!-- Étiquettes pour l'axe des ordonnées -->
<text x="30" y="60" text-anchor="end">1500</text>
<text x="30" y="150" text-anchor="end">1000</text>
<text x="30" y="250" text-anchor="end">500</text>
<text x="30" y="350" text-anchor="end">0</text>
<!-- Barres de données -->
<rect x="65" y="300" width="50" height="50" fill="#3498DB" class="getData" data-legende="Janvier" />
<rect x="130" y="250" width="50" height="100" fill="#ec70e7" class="getData" data-legende="Février" />
<rect x="195" y="200" width="50" height="150" fill="#FFC300" class="getData" data-legende="Mars" />
<rect x="260" y="160" width="50" height="190" fill="#FF5733" class="getData" data-legende="Avril" />
<rect x="325" y="220" width="50" height="130" fill="#27AE60" class="getData" data-legende="Mai" />
<!-- Étiquettes pour l'axe des abscisses -->
<text x="90" y="380" text-anchor="middle">Janvier</text>
<text x="155" y="380" text-anchor="middle">Février</text>
<text x="220" y="380" text-anchor="middle">Mars</text>
<text x="285" y="380" text-anchor="middle">Avril</text>
<text x="350" y="380" text-anchor="middle">Mai</text>
<!-- Légende -->
<text x="90" y="285" text-anchor="middle" class="legende" id="Janvier">214</text>
<text x="155" y="235" text-anchor="middle" class="legende" id="Février">429</text>
<text x="220" y="185" text-anchor="middle" class="legende" id="Mars">642</text>
<text x="285" y="145" text-anchor="middle" class="legende" id="Avril">814</text>
<text x="350" y="205" text-anchor="middle" class="legende" id="Mai">557</text>
</svg>
</section>
Histogramme HTML avec SVG – Ventes Mensuelles
<line> : Cette balise crée un élément de ligne dans le fichier SVG. Les coordonnées x1="50" et y1="50" représentent le point de départ de la ligne, tandis que x2="50" et y2="350" définissent le point d’arrivée de la ligne. L’attribut stroke="black" spécifie la couleur de la ligne, qui est noire dans ce cas, et stroke-width="2" détermine l’épaisseur de la ligne. Cette ligne représente l’axe vertical dans notre graphique.
<rect> : Cette balise crée un rectangle dans le fichier SVG. Les attributs définissent sa position et sa taille : x="65" et y="300" déterminent la position en haut à gauche du rectangle, tandis que width="50" et height="50" spécifient sa largeur et sa hauteur. L’attribut fill="#3498DB" indique la couleur de remplissage du rectangle. La classe getData peut être utilisée pour appliquer des styles ou ajouter des fonctionnalités via CSS ou JavaScript. L’attribut data-legende="Janvier" fournit une information supplémentaire associée au rectangle, dans ce cas, le mois à afficher.
<text> : Cette balise crée un élément de texte dans le fichier SVG. Les attributs x et y déterminent la position du texte par rapport au coin supérieur gauche de son conteneur. L’attribut text-anchor="middle" centre horizontalement le texte par rapport à sa position spécifiée. La classe legende peut être utilisée pour appliquer des styles au texte. L’attribut id="Janvier" permet de référencer cet élément de texte, et le texte lui-même est 214, ce qui peut représenter une valeur ou une étiquette associée au mois dans le contexte du graphique.
La mise en page CSS de l’histogramme
section {
border: 1px solid #dedede;
border-radius: 5px;
}
h4 {
background: #dedede;
margin: 0;
padding: 20px;
text-align: center;
font-size: 22px;
}
svg {
display: block;
margin: 50px auto;
}
svg .legende {
display: none;
fill: #555;
font-weight: bold;
}
svg rect:hover {
fill: #555;
cursor: pointer;
}
On applique l’attribut display:none; aux éléments de légende de l’histogramme pour les cacher. Nous ferons apparaitre la légende de chaque bâton en javascript.
Le javascript pour un effet dynamique de l’histogramme
// Sélection des éléments ayant la classe "getData"
const elements = document.querySelectorAll(".getData");
// Fonction pour afficher la valeur de l'attribut data-legende lors du survol
function afficherLegende(event) {
// Récupération de la valeur de l'attribut data-legende
const legende = event.target.dataset.legende;
const monElement = document.getElementById(legende);
// Ajout de style à l'élément
monElement.style.display = "inline";
}
// Ajout d'un écouteur d'événement pour chaque élément pour le survol
elements.forEach(element => {
element.addEventListener("mouseover", afficherLegende);
});
// Fonction pour cacher la légende lorsque le survol se termine
function quitterSurvol(event) {
const legende = event.target.dataset.legende;
const monElement = document.getElementById(legende);
// Retrait de style à l'élément
monElement.style.display = "none";
}
// Ajout d'un écouteur d'événement pour chaque élément pour le quitté du survol
elements.forEach(element => {
element.addEventListener("mouseout", quitterSurvol);
});
On utilise la fonction afficherLegende() pour changer le style de l’élément du SVG <text> correspondant afin de l’afficher. On passe d’un display: none; (élément caché) à display: inline; (élément visible). On se sert d’un écouteur, addEventListener, pour chaque élément survolé par la souris (à l’aide d’une boucle forEach pour lister tous les éléments) et on applique cette fonction lors du survol.
La fonction quitterSurvol() fonctionne exactement de la même façon en appliquant un display: none; (élément caché) à l’élément visible (la légende visible du bâton correspondant). On se sert d’un écouteur, addEventListener, pour chaque élément où la souris quitte le survol (à l’aide d’une boucle forEach) et on applique cette fonction quitterSurvol() lorsque la souris quitte cet élément.
