graph barre
/Html JavaSript/html/graph barre.html
<style type="text/css">
#graphMontant {
width:210px;
height:300px;
border:1px solid #000;
position:relative; /* pour positionnement des barres dans le graph */
margin:auto; padding:0;
list-style-type:none;
}
#graphMontant li {
background:green;
position:absolute; bottom:0;
width:25px;
border-width:1px 1px 0 1px;
border-style:solid;
border-color:#000;
text-align:center;
font-size:10px;
margin:0;padding:0;
}
#graphMontant li div { /* jour de la semaine */
position:absolute; bottom:-15px; left:0;
width:25px;
text-align:center;
}
</style>
<div style="text-align:center;margin 2em 0">
<h3 styme="margin-bottom:0">CA par jour (en milliers)</h3>
<ul id="graphMontant">
<li style="height:168px;left:7px">56<div>M</div></li>
<li style="height:99px;left:35px">33<div>J</div></li>
<li style="height:126px;left:63px">42<div>V</div></li>
<li style="height:150px;left:91px">50<div>S</div></li>
<li style="height:18px;left:119px">6<div>D</div></li>
<li style="height:138px;left:147px">46<div>L</div></li>
<li style="height:0px;left:175px">0<div>M</div></li>
</ul>
</div>