Gli elementi span rappresentano la colonna e gli em sono quei quadrati al centro con i rispettivi valori. Gli span sono posizionati assolutamente e piazzati sul fondo, così possono crescere dal fondo stesso in base alla loro percentuale:
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;
}
Ecco lo schema del grafico:
Figura 3 - Schema del grafico
Come impostiamo allora l'altezza?
Lo facciamo impostando il valore height per gli elementi span in pecentuale. Avete notato nella parte relativa al markup che lo span ha due classi CSS. La prima definisce il suo tipo (da type1 a type4). Nel mio caso i type sono usati per impostare diversi colori. La seconda classe (da p0 a p100) definisce l'altezza dello 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%;}
Così, oltre a inserire il valore nel testo dobbiamo fornire una classe CSS che corrisponda ad esso:
<dd><span class="type2 p80"><em>80</em></span></dd>
Così funziona tutto. È ovvio che i dati, oltre che inseriti a mano, possono anche essere generati programmaticamente.
