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_wart2","" "
);
$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


$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.