Graphe en barres en CSS et JavaScript

Compléter une page avec un graphe en barre, rapidemment et sans utiliser de framework qui ralentirait le chargement de la page, on sera surpris de voir que cela peut s'obtenir avec quelques lignes de code CSS et une seule fonction JavaScript!

Il a suffi de 3 minutes 15 secondes, avec un copier coller du code de la démonstration, l'ajout des données, pour créer le graphe ci-contre:

Le code HTML

Explication du code de la démonstration.

A la base, le code est juste une liste:

<ul>  
  <li>30:2007:lightblue</li>
  <li>40:2008:lightgreen</li>
  <li>80:2009:yellow</li>
  <li>14:2010:cyan</li>
</ul>

La seule chose que le webmaster ait à ajouter, ce sont les données. Dans chaque item de la liste, séparés par le code ":", on place le libellé pour la barre, la quantité ou le pourcentage, et la couleur de barre.
Et la fonction JavaScript se charge de produire le graphe.

Pour afficher les axes et les références en ordonnées, un container est ajouté:

<div id="graph">
  200<br /> <br /> <br /> 150 <br /> <br /> <br /> 100 <br /> <br /> <br /> 50
<ul>
    <li></li>
     .....
</ul>
</div>

Le choix des valeurs en ordonnées dépend de l'application. Pour les parts de marché des navigateurs par exemple, un seul chiffre suffit.

Un autre conteneur est prévu pour les libellés:

<div id="labels">Années</div>

Afficher automatiquement les libellés sur le graphe serait compliqué. Si l'on veut les avoir sur le graphe lui-même, on peut faire une capture du graphe une fois généré et ajouter du texte sur l'image avec Paint.NET ou The Gimp. (voir logiciels).

Le code CSS

Il transforme les balises <ul> en conteneur et <li> en barres du graphe.

Il est surtout important que le conteneur ait la position absolute et le conteneur qui affiche les repères la position relative, et les items la position absolute. La fonction JavaScript se charger de positionner les barres.

#graph
{
    position:relative;
    width:660px;
    height:216px;
    margin:8px;
    padding:0;	
}
#graph ul
{
    position:absolute;
    top:0;
    left:32px;
    width:600px;
    height:200px;
    border-left:1px solid black;
    border-bottom:1px solid black;	
}

Les axes sont créés grâce à un bord d'un pixel d'épaisseur.

Les barres sont définies ainsi: 

#graph li
{
   position:absolute;	
   list-style:none;
   background:lightblue;
   width:40px;
   text-align:center;
   border:1px solid black;
   visibility: hidden;
}

Le bord noir ajouté aux barres est une option. Une couleur de fond bleue et donnée par défaut, elle est modifiée par la fonction JavaScript.

Visibilité différée

Pour éviter l'affichage du contenu des items avant la transformation en graphique par JavaScript les balises <li> sont cachées au départ:

visibility:hidden;

et rendue visibles ensuite:

item.style.visibility="visible";

La fonction JavaScript

Le rôle de l'unique fonction est de créer des barres et afficher les libellés. 

function makeGraph(container, labels)
{
    container = document.getElementById(container);
    labels = document.getElementById(labels)
    var dnl = container.getElementsByTagName("li");
    for(var i = 0; i < dnl.length; i++)
    {
        var item = dnl.item(i);
        var value = item.innerHTML;
        var color = item.style.background=color;
        var content = value.split(":");
        value = content[0];
        item.style.height=value + "px";
        item.style.top=(199 - value) + "px";
        item.style.left = (i * 50 + 20) + "px";
        item.style.height = value + "px";
        item.innerHTML = value;
        item.style.visibility="visible";	
        color = content[2];
        if(color != false) item.style.background=color;
        labels.innerHTML = labels.innerHTML +
             "<span style='margin:8px;background:"+ color+"'>" + 
             content[1] + "</span>";
    }	
}

window.onload=function () { makeGraph("graph", "labels") }

On extrait l'objet DOM du conteneur pour modifier localement les balises <ul> et <li> et non pas toutes les balises dans la page.

Pour chaque balise <li> de l'objet graph:

  1. On extrait le texte.
  2. Les données sont séparées: valeur, libellé, couleur.
  3. La valeur devient la hauteur de la barre. Cette hauteur est soustraite de la hauteur du graphe, elle devient la hauteur de l'item <li> dont la couleur de fond est aussi modifiée.
  4. Le libellé est lui placé dans un second conteneur, labels, avec en couleur de fond la couleur de la barre.

Ceci suffit à compléter sans l'alourdir une page par un graphique, et en quelques minutes!

Démonstration

200


150


100


50
Années

Le code HTML de base se réduit à ceci:

<ul>
<li>30:2007:lightblue</li>
<li>40:2008:lightgreen</li>
<li>80:2009:yellow</li>
<li>14:2010:cyan</li>
</ul>

A cela s'ajoutent le code CSS pour redéfinir les balises <li> et le code JavaScript pour générer automatiquement les barres à partir des données placées dans les balises <li>.

Voir aussi

© 2010-2012 Xul.fr