Réalisez un histogramme avec CSS

Dans cet exemple, je n'utilise pas de JavaScript, ni aucune application en arrière-plan. Tout ce sur quoi je compte est un balisage bien formé et du CSS.

Donc, l'objectif est de présenter des données sous forme graphique. Nous pourrions dire que la graphique est un objet en deux dimensions. Donc, le meilleur choix de structure et de sémantique est la liste de définitions. Pourquoi ? Eh bien, pour commencer, il s'agit d'une liste de points. Bien que la liste soit linéaire, on pourrait interpréter la définition des titres (dt éléments) sur les points d'axe x et la définition des descriptions (éléments dd) en tant que valeurs sur l'axe y.

Si cela n'a pas de sens en raison de mes piètres capacités d'explication :) disons que ce que je vais faire est transformer ceci :

en cela :

uniquement avec du css.

Dans mon exemple, j'ai utilisé une période des 12 derniers jours et présenté mon niveau d'énergie au travail en pourcentage, 100% étant l'énergie la plus élevée que j'ai jamais déployée dans un travail. Comme vous pouvez le voir, le 6ème jour est plus important, parce que j'ai reçu un gros chèque et que ça m'a boosté :)

Quoi qu'il en soit, pour la structure de ce type de données, j'ai choisi la liste de définitions.

La définition du titre contient le titre du jour :

<dt>Day 1</dt>

Et la description des définitions contient la valeur

<dd>36</dd>

À l'intérieur de l'élément de description des définitions je vais ajouter un span et un élément em imbriqués. Non pas dans un but structurel, mais pour me donner suffisamment d'éléments avec lesquels travailler. Je vais aussi attribuer des classes que je pourrais utiliser plus tard.

Alors la description de définition ressemble maintenant à ceci:

<dd><span class="type2 p80"><em>80</em></span></dd>

La liste de définition contient les actes comme un tableau, je vais donc assigner lui une image de fond et définir la largeur et la hauteur correspondant à la dimension du graphique. Je vais également enlever les marges et paddings par défaut.

dl#csschart, dl#csschart dt, dl#csschart dd
{
    margin:0;
    padding:0;
}
 
dl#csschart
{
    background:url(bg_chart.gif) no-repeat 0 0;
    width:467px;
    height:385px;
}

La définition du titre n'a aucun intérêt visuel, je vais donc la cacher.

dl#csschart dt
{
    display:none;
}

Passons aux choses sérieuses. La définition des descriptions contient 2 éléments enfants: span et em. Cela me donne 3 éléments pour travailler.

Je vais mettre <dd> dans la bonne position en ajoutant les marges, en définissant la hauteur telle qu'elle corresponde à une valeur de 100% et la largeur telle qu'elle corresponde à une colonne de l'arrière-plan du graphique. Les <dd> sont flottants à gauche pour qu'ils s'alignent. Les <dd> ont une position relative de sorte que les éléments enfants puissent s'identifier à eux.

dl#csschart dd
{
    position:relative;
    float:left;
    display:inline;
    width:33px;
    height:330px;
    margin-top:22px;
} 
 
dl#csschart dd.first
{
    margin-left:33px;               
}

Les éléments Span représentent la colonne et les em sont placé au centre avec des valeurs. Les spans sont en position absolue, et placés en bas, afin de leur permettre de "grandir" de bas en haut sur la base de leur pourcentage.

dl#csschart span
{
    position:absolute;
    display:block;
    width:33px; 
    bottom:0;
    left:0; 
    z-index:1;
    color:#555;
    text-decoration:none;
}
 
dl#csschart span em
{
    display:block;
    font-style:normal;
    float:left;
    line-height:200%;
    background:#fff;
    color:#555;
    border:1px solid #b1b1b1;
    position:absolute;
    top:50%;
    left:3px;
    text-align:center;
    width:23px;
}

Voici le schéma d'une barre graphique :

Alors, comment définissons-nous la hauteur exacte ?

Nous le faisons par réglage de la hauteur en pourcentage pour l'élément span. Vous avez remarqué dans la section ci-dessus que le span s'étend sur deux classes CSS. La première définit le type (type1 - type4). Dans mon cas les types sont utilisés pour présenter des couleurs différentes. La deuxième classe (p0 - P100) est celle qui définit la hauteur du span.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
.
.
.
dl#csschart span.p100{height:100%;}

Ainsi, en plus de mettre la valeur en tant que texte, nous avons fourni une classe CSS qui correspond.

<dd><span class="type2 p80"><em>80</em></span></dd>

Cela fera l'affaire.
Bien sûr, le balisage peut être généré par un programme ou à la main, selon ce que vous préférez.

Voir un exemple en ligne.

L'exemple est à votre disposition au format zip à cette adresse : source.

Tous mes remerciements à Celira pour sa relecture.