Jak zrobić prosty wykres słupkowy, wersja pionowa

Simply vertical charts

Przykład PHP + CSS2014-03-07 stopień trudności: łatwy

Ze wzglÄ™du na proÅ›by o rozwiniÄ™cie przykÅ‚adu "Jak zrobić prosty wykres sÅ‚upkowy" zamieszczam wersjÄ™ vertical z opisem pól.

<style>

.block{

width:60px;

border-right:solid 2px white;

border-top:solid 2px white;

border-left:solid 2px #808080;

margin-right:5px;

}

#wraper{

background-color:#000000;

}

.opis{

background-color:#FFFFFF;

}

.charts{

vertical-align:bottom;

color:#FFFFFF;

}

</style>

<?
//tworzymy tablicÄ™ wartoÅ›ci
$tab_wart = array('5','20','40','10','80');
//tworzymy tablicÄ™ opisów
$tab_name = array('jabÅ‚ka','gruszki','pomaraÅ„cze','cytryny','kiwi');
//tworzymy tablicÄ™ kolorów 
$kolory = array('#004080','#FF0000','#800040','#008040','#670C89');

//sumujemy wartość wszystkich pozycji
$razem_wart = array_sum($tab_wart);

for($j=0; $j < count($tab_wart) ; $j++){

//wyliczamy procentowÄ… wartość
$pre = number_format(($tab_wart[$j]*100)/$razem_wart, 2, ",", " ");
$height = floor($pre)*5.0;

$kolor = $kolory[$j];

$charts .= "<td class=\"charts\" align=\"center\">
<div class=\"block\" style=\"height:".$height."px;background-color:".$kolor.";padding:4px;\">";
$charts .= "".$pre."%";
$charts .= "</div></td>";

$opis .= "<span style=\"background-color:$kolor;height:8px\">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<font color=\"$kolor\"><b>".$tab_name[$j]." ".$pre."%</b></font><br/>";

}
$wykres = "<table border=\"0\" cellpadding=\"6\" id=\"wraper\">";
$wykres .= "<tr><td><font color=\"#FFFFFF\"><b>Co smakuje lepiej ?</b></font></td></tr>";
$wykres .= "<tr><td>";
$wykres .= "<table border=\"0\" cellpadding=\"6\">";
$wykres .= "<tr>";
$wykres .=  $charts;
$wykres .= "</tr>";
$wykres .= "</table>";
$wykres .= "</td></tr>";
$wykres .= "<tr><td class=\"opis\">".$opis."</td></tr>";
$wykres .= "</table>";


//i wstawiamy w jakimÅ› miejscu
echo $wykres;
?>


 Podpowiedź: Zamiast kolorów możesz użyć obrazków tÅ‚a np. z wypeÅ‚nieniem tonalnym, procentowo manipulujÄ…c
 w stylu ustawieniem background-position


manual: array_sum() floor() number_format()

$download++;


 
close
Strona korzysta z plików cookies. Zastosowane pliki cookie służą jedynie do prowadzenia ogólnych statystyk pozwalających na określenie popularności serwisu.