Creare un grafico a colonne verticale in css

Di seguito vedremo passo per passo come creare un grafico a colonne verticale in css per visualizzare una percentuale attuale comparata a una passata per ogni mese del anno.

Le cifre desiderate vengono inserite nel html e le colonne ridimensionate in rapporto alla percentuale usando i css.

Anteprima visuale del grafico css a colonne verticale:

La struttura html del grafico a colonne verticale.

La struttura html è costituita da un div contenitore con un nome id unico (css_grafico_colonne_verticale), il quale contiene liste tipo non ordinate (elemento <ul>).
Ogni lista ha un id specifico per rappresentare i 12 mese dell’ anno (jan, feb, mar, apr…).
I suoi elementi (li) sono classificate in 2 modi: il primo (nome di classe ‘perc_attuale’) per la percentuale attuale del mese, mentre il secondo (nome di classe ‘perc_passato’) visualizza la percentuale passata del mese in modo di potere comparare i risultati d’un anno a l’altro.

L’html di base:

<div id="css_grafico_colonne_verticale">
<ul id="gen">
<li class="perc_attuale">33%</li>
<li class="perc_passato">17%</li>
</ul>
<ul id="feb">
<li class="perc_attuale">51%</li>
<li class="perc_passato">20%</li>
</ul>
<ul id="mar">
<li class="perc_attuale">62%</li>
<li class="perc_passato">35%</li>
</ul>
<ul id="apr">
<li class="perc_attuale">72%</li>
<li class="perc_passato">39%</li>
</ul>
<ul id="mag">
<li class="perc_attuale">89%</li>
<li class="perc_passato">47%</li>
</ul>
<ul id="giu">
<li class="perc_attuale">97%</li>
<li class="perc_passato">54%</li>
</ul>
<ul id="lug">
<li class="perc_attuale">81%</li>
<li class="perc_passato">57%</li>
</ul>
<ul id="ago">
<li class="perc_attuale">69%</li>
<li class="perc_passato">44%</li>
</ul>
<ul id="set">
<li class="perc_attuale">52%</li>
<li class="perc_passato">32%</li>
</ul>
<ul id="ott">
<li class="perc_attuale">38%</li>
<li class="perc_passato">23%</li>
</ul>
<ul id="nov">
<li class="perc_attuale">17%</li>
<li class="perc_passato">10%</li>
</ul>
<ul id="dic">
<li class="perc_attuale">9%</li>
<li class="perc_passato">4%</li>
</ul>
</div>

Le regole css applicate per creare il grafico a colonne verticale.

Lo stile generale del grafico a colonne verticale è applicato usando il nome id del div contenitore e nome di classe. Mentre usando i nome id relativi a ogni mese, possiamo specificare l’altezza in rapporto alla sua percentuale.

Ho creato un layout del grafico in modo di farvi capire meglio il modo per crearlo e le proprietà css applicate.

1. Regole css del div contenitore ‘css_grafico_colonne_verticale

#css_grafico_colonne_verticale{
background:url(css_grafico_colonne_verticale_bg.jpg) no-repeat;
width:414px;
height:330px;
padding-top:30px;
padding-left:30px;
}

Al div contenitore, impostiamo:

• background:url(css_grafico_colonne_verticale_bg.jpg) no-repeat; immagine di base del grafico come sfondo css.
  
• width:414px; la larghezza equivalente alla larghezza del’immagine (444px) di sfondo meno il padding di sinistra (30px)
• height:330px; l’altezza equivalente a l’altezza del’immagine (360px) di sfondo meno il padding superiore (30px)
• padding-top:30px; il spazio superiore tra l’elemento contenitore e il suo contenuto per posizionare le liste adequatamente
• padding-left:30px; il spazio a sinistra tra l’elemento contenitore e il suo contenuto per posizionare le liste adequatamente

2. Regole css generale delle liste contenute in ‘css_grafico_colonne_verticale’

#css_grafico_colonne_verticale ul{
padding:0;
margin:0;
list-style:none;
height:300px;
width:30px;
float:left;
margin-left:2px;
position:relative;
}

Per evitare problemi d’interpretazione tra i vari browser, iniziamo per azzerare sia le margine e le spazi cuscinetti agli elementi ‘ul’ (padding:0; margin:0;) e togliamo i marcatori di default delle liste (list-style:none;) e specifichiamo:

• height:300px; l’altezza massima delle colonne pare a una percentuale di 100%
• width:30px; la larghezza delle colonne
• float:left; le colonne vengono spostate a sinistra con il float per allinearle orizzontalmente
• margin-left:2px; un margine vuoto di 2px a sinistra di ogni colonne
• position:relative; la posizione relativa è necessaria per di seguito posizionare gli elementi della lista in modo assoluto in rapporto a lei

3. Regole css degli elementi ‘li’ delle liste

#css_grafico_colonne_verticale ul li{
width:30px;
position:absolute;
bottom:0;
text-align:center;
font-size:10px;
color:#FFFFFF;
}

Gli elementi ‘li’ vengono posizionato in modo assoluto (position:absolute;) in rapporto a loro elemento genitore (i ‘ul’ in questo caso) togliandole del flusso naturale della pagina e spostato in modo tale che la loro parte inferiore sia in linea con lo sfondo delle liste (bottom:0;).

Impostiamo anche una larghezza specifica di 30px (width:30px;) pare alla larghezza delle colonne e aggiungiamo le proprietà css proprie allo testo:

• text-align:center; allineamento orizzontale centrale del testo
• font-size:10px; la misura di 10px dei caratteri
• color:#FFFFFF; il colore bianco dei caratteri

4. Il colore di sfondo delle colonne

Il colore di sfondo delle colonne è impostato usando i nomi di classe: perc_attuale di colore verde e perc_passato di colore arancione.

#css_grafico_colonne_verticale ul li.perc_attuale{
background-color:#009999;
}
#css_grafico_colonne_verticale ul li.perc_passato{
background-color:#FF6600;
}

5. Stile css specifico ad ogni mese

Adesso che abbiamo realizzato la struttura di base del grafico a colonne verticale con i css, possiamo dare un valore a l’altezza di ogni colonne basato sul valore della percentuale desiderata che sia quella attuale o quella passata.

In questo esempio, mi sono basata su un rapporto di 3px per 1%. Il massimo essendo 100% equivalente appunto a l’altezza di 300px dato agli elementi ‘ul’.

Esempio:

valore = 33% = 99px (33×3)

Esempio di regole css per il mese di gennaio con id ‘gen’:

Per la colonna verde:

#css_grafico_colonne_verticale #gen li.perc_attuale{
height:99px;
}

Per la colonna arancione:

#css_grafico_colonne_verticale #gen li.perc_passato{
height:51px;
}

Lo stile css completo per ogni mese basato sui valori del esempio:

/*percentuale attuale – colonna verde*/
#css_grafico_colonne_verticale #gen li.perc_attuale{
height:99px;
}
#css_grafico_colonne_verticale #feb li.perc_attuale{
height:153px;
}
#css_grafico_colonne_verticale #mar li.perc_attuale{
height:186px;
}
#css_grafico_colonne_verticale #apr li.perc_attuale{
height:216px;
}
#css_grafico_colonne_verticale #mag li.perc_attuale{
height:267px;
}
#css_grafico_colonne_verticale #giu li.perc_attuale{
height:291px;
}
#css_grafico_colonne_verticale #lug li.perc_attuale{
height:243px;
}
#css_grafico_colonne_verticale #ago li.perc_attuale{
height:207px;
}
#css_grafico_colonne_verticale #set li.perc_attuale{
height:156px;
}
#css_grafico_colonne_verticale #ott li.perc_attuale{
height:114px;
}
#css_grafico_colonne_verticale #nov li.perc_attuale{
height:52px;
}
#css_grafico_colonne_verticale #dic li.perc_attuale{
height:27px;
}
/*percentaule passata – colonna arancione*/
#css_grafico_colonne_verticale #gen li.perc_passato{
height:51px;
}
#css_grafico_colonne_verticale #feb li.perc_passato{
height:60px;
}
#css_grafico_colonne_verticale #mar li.perc_passato{
height:105px;
}
#css_grafico_colonne_verticale #apr li.perc_passato{
height:117px;
}
#css_grafico_colonne_verticale #mag li.perc_passato{
height:141px;
}
#css_grafico_colonne_verticale #giu li.perc_passato{
height:162px;
}
#css_grafico_colonne_verticale #lug li.perc_passato{
height:171px;
}
#css_grafico_colonne_verticale #ago li.perc_passato{
height:132px;
}
#css_grafico_colonne_verticale #set li.perc_passato{
height:96px;
}
#css_grafico_colonne_verticale #ott li.perc_passato{
height:69px;
}
#css_grafico_colonne_verticale #nov li.perc_passato{
height:30px;
}
#css_grafico_colonne_verticale #dic li.perc_passato{
height:12px;
}

Il risultato del grafico css a colonne verticale:

Provato con IE6+, Firefox2+, Safari3+, Opera9 su Windows