Pour mon stage chez Ultranoir (j’en reparlerais plus tard), j’ai eu l’occasion de réaliser un diagramme en barre, simple. J’ai voulu qu’il soit complètement en CSS (j’ai quand même rajouté de l’animation en javascript par la suite, mais pour cet article, je me contenterai de vous présenter le diagramme sans animation).

Pour commencer, voilà la structure html du diagramme:

1
2
3
4
5
6
7
8

<div id="content">
  <div id="graph">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

Vous l’aurez compris, notre diagramme est composé de 4 barres! Passons maintenant à la première partie du CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.bar {
  width: 100px;
  height: 100px;
  float: left;
}
.g1 {
  background: #029FD6;
  position: relative; 
}
 
.g2 {
  background: #E2017B;
  position: relative;
}
 
.g3 {
  background: #A4C409;
  position: relative;
}
.g4 {
  background: #939393;
  position: relative;
}

Maintenant, notre div .gX étant en position absolute, il suffit de lui donner la bonne taille et le bon attribut TOP dans votre feuille de style, et le tout est joué!
Si vous souhaitez votre un exemple qui fonctionne, voilà la page complète:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
<div id="content" style="height:300px;width:400px">
	<div id="graph" style="height:300px">
		<div class="bar">
		        <div class="g1" style="height:300px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g2" style="height:180px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g3" style="height:75px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g4" style="height:45px;width:100px"></div>
		</div>
	</div>
 
</div>

NB: Bizarrement, le plugin qui affiche le code HTML ne semble pas afficher l’attribut top dans le style des gX… Il suffit de le rajouter comme ceci: style= »height: 180px; top: 120px; width: 100px; » ou la valeur de top est la hauteur totale moins la hauteur de la barre souhaitée.

N’oubliez pas d’enregistrer la feuille de style dans le fichier styles.css

Le résultat devrait ressemble à ça:

graph

Pour ne plus avoir à calculer le TOP et la hauteur de chaques barres, une petite fonction PHP ne fera pas de mal. Je ne la donnerai pas ici, ce n’est pas le but de l’article, mais si vous rencontrez un problème, n’hésitez pas à laisser un commentaire !

O comments at "Un diagramme en barre, en pure CSS"

Be the first commenter!

Comment Now!

Name* Mail Adress* Blog / Website

Spam Protection by WP-SpamFree