Generowanie prostych wykresów

autor: Paweł 'lisek' Lis, ostatnia modyfikacja: 2008-05-10

szukaj: wykresy php generownie wykresów php

Czasem trzeba na stronie zamieścić jakiś wykres. Jeśli wszystkie kolumny są w pliku graficznym, nie ma problemu. Zaczyna się on gdy wykres musi być wygenerowany dynamiczne. Za pomocą prostego skryptu pokażę, jak można wygenerować wykres o określonej maksymalnej szerokości (tak aby układ strony pozostał nienaruszony-podanie wartości wykresu jako jego szerokości w pikselach może mieć straszne skutki np. gdy wykres ma wartość 100000).

Na początku w zmiennej $max ustawiamy maksymalną szerokość. Będzie to szerokość największego elementu wykresu - wszystkie inne będą proporcjonalnie mniejsze:

$max=368;

Następnie w zmiennej $wykres podajemy wszystkie wartości wykresu. Pozostawienie pustych nawiasów kwadratowych sprawi że PHP sam przypisze im kolejne numery (0,1,2,3 itd.), dzięki temu nie trzeba się martwić o ich numerację:

$wykres[]=155; 
$wykres[]=2111; 
$wykres[]=299; 
$wykres[]=400;

Do zmiennej $najwieksza przypisujemy pierwszy element zmiennej $wykres, a następnie w pętli while (równie dobrze można użyć pętli for - red.) szukamy największego elementu:

$nr=0; 
$najwieksza=$wykres[0];
while ($nr<count($wykres)) { 
 if ($wykres[$nr]>$najwieksza)
  $najwieksza=$wykres[$nr]; 
 $nr++;
}

W kolejnej pętli wyświetlany jest wykres za pomocą bloków div (może to być jakikolwiek znacznik):

$nr=0; 
while ($nr<count($wykres)) { 
$licz = $max * $wykres[$nr] / $najwieksza; 
$licz = round ($licz,0); 
print '<div class="wykres" style="border:2px solid red;width:' . $licz . 'px">&nbsp;</div>'; 
$nr++; 
}

Po wykonaniu kodów z tego artykułu powinny ukazać się cztery prostokąty o czerwonych obramowaniach o szerokościach 27, 368, 52 i 70 pikseli.

Odpowiednio zmieniając style każdego elementu można sprawić, że słupki wyświetlane będą pionowo (jednak zastosowanie float:left; sprawi że elementy będą wyświetlane „od końca”).

Paweł 'lisek' Lis

szukaj: wykresy php generownie wykresów php php

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!