Hi,
wollte euch ein kleines geschicktes Tutorial für die grafische Anzeige von Poll-Auswertungen oder Ahnlichem geben, nix großes, trotzdem recht hübsch wie ich finde.
In diesem Tutorial will ich NUR auf die grafische Auswertung eingehen und nicht auf das Poll-System selbst, was oft genug behandelt wurde. Am Ende der Seite seht ihrm wie es am Ende aussehen soll.
Zuerst sollten wir nun eine .php Datei erstellen. die wir zB "poll_img.php" nennen.
Damit wir das ganze dynamisch benutzten können, müssen wir diesem Bild die Anzahl der Stimmen in % zu allen abgegeben Stimmen übergeben. Diese Prozentzahl rechnet man ganz einfach so aus:
PHP-Code:
$prozent = round ( ( $stimmen_für_antwort / $alle_stimmen ) * 100 );
Diese Rechnung gehört aber in die aufrufende Datei. Diesen Prozentsatz bekommen wir am geschicktesten durch $_GET[] wir müssen die Bild-Datei also "poll_img.php?p=50" aufrufen, wobei 50 die Prozentzahl ist. Außerdem wollen wir natürlich nicht alles in der gleichen Farbe lassen, was auch funktionieren würde aber ein bisschen langweilig wäre, daher übergeben wir noch eine Variable, die die Farbe bestimmen soll "poll_img.php?p=50&col=r", doch dazu später mehr.
PHP-Code:
<?
// poll_img.php
// Variablen hohlen
$prozent = $_GET['p'];
$col = $_GET['col'];
// Bild größen
$image_width=150;
$image_height=15;
// Bild erstellen und Hintergrund einfärben
$img=@ImageCreate($image_width,$image_height) OR die("Fehler beim erstellen des Bildes!");
$background_col=ImageColorAllocate($img,255,255,255);
ImageFill($img,0,0,$background_col);
Nun haben wir also ein weißes Bild und die 2 Variablen. Ich habe nun 2 Farbüberläufe eingefügt, man könnte aber natürlich auch einfarbige Balken nehmen.
Dafür brauchen wir 2 Variablen, zum einen eine Variable für die aktuelle X-Position auf dem Bild und zum anderen eine Variable, in der die aktuelle Farbe gespeichert ist. Danach brauchen wir eine While-Schleife, die solange läuft bis der 1. Balken soweit ist, das in unserem Beispiel 50% des Bilds gefärbt ist.
PHP-Code:
// Aktuelle X-Position
$ac_x_pos=0;
// Aktuelle Farbe, hier kann natürlich jeder andere Wert benutzt werden
$ac_color=200;
// Da wir für die while schleife einen wert zwischen 0 und 1 brauchen
// mit dem wir das Bild multiplizieren, teilen wir die $prozent angabe durch 100
// und erhalten in unserem fall 0,5, dh. die Schleife wird solange ausgeführt
// bis unsere Positions Variable die hälfte des Bildes überschreitet
while($ac_x_pos<($image_width*($prozent/100)))
{
Nun müssen wir also erstmal unsere aktuelle Farbe bestimmen, dann einen Balken einfügen und die X-Position weitersetzten und das ganze wieder von...
PHP-Code:
// Da wir verschiedene Farben wollen schaun wir nun welchen Wert $col hat
// und esetzten dann jeweils verschiedene Farbwerte ein, hier kann man natürlich auch
// noch weiter Farben einsetzten oder etwas mit den werten rumspielen
switch ( $col )
{
//RED
case "r":
$ac_col=ImageColorAllocate($img,$ac_color,120,120);
break;
// GREEN
case "g":
$ac_col=ImageColorAllocate($img,120,$ac_color,120);
break;
// BLUE
case "b":
$ac_col=ImageColorAllocate($img,120,120,$ac_color);
break;
// YELLOW
case "y":
$ac_col=ImageColorAllocate($img,$ac_color,$ac_color,120);
break;
// MARINE
case "m":
$ac_col=ImageColorAllocate($img,120,$ac_color,$ac_color);
break;
// PINK
case "p":
$ac_col=ImageColorAllocate($img,$ac_color,120,$ac_color);
break;
// GREY
case "gr":
$ac_col=ImageColorAllocate($img,$ac_color,$ac_color,$ac_color);
break;
}
Jetzt haben wir unsere Farbe, nun ein Balken erstellen ,den Farbwert und die X-Position erhöhen:
PHP-Code:
// Einen Balken einfügen
ImageFilledRectangle ( $img, $ac_x_pos, 0, $ac_x_pos+2, $image_height, $ac_col);
// Durch die erhöhung des Farbwerts wirds beim nächsten Schritt heller
$ac_color+=5;
// Da ein Farbwert von zB 260 wie 005 (Also sehr dunkel) gezählt wird
// müssen wir überprüfen ob der Farbwert 255 übersteigt, wenn ja auf 255 setzten
if( $ac_color > 255 )
$ac_color=255;
// X-Position erhöhen
$ac_x_pos+=2;
// While Schleife beendet
}
Nun fügen wir eine kleine Anzeige ein zwischen die beiden Balken:
PHP-Code:
// Goldene Farbe bestimmen
$gold=ImageColorAllocate($img,251,189,23);
// Rechteck färben
ImageFilledRectangle ( $img, $ac_x_pos, 0, $ac_x_pos+1, $image_height, $gold);
// Position weitersetzten damit es nicht überschrieben wird
$ac_x_pos+=1;
Der 2. Farbverlauf funktioniert eigentlich gleich, nur das hier eine graue Farbe benutzt wird, deswegen hier ohne viele weitere Erklärungen:
PHP-Code:
$grey = 210;
while($ac_x_pos<=$image_width)
{
$ac_col=ImageColorAllocate($img,$grey,$grey,$grey);
ImageFilledRectangle ( $img, $ac_x_pos, 0, $ac_x_pos+2, $image_height, $ac_col);
$grey+=2;
if ($grey > 255)
$grey = 255;
$ac_x_pos+=2;
}
Noch eine Beschriftung in die Mitte des Bildes:
PHP-Code:
// Text Farbe
$txt=ImageColorAllocate($img,50,50,50);
// Text einfügen
ImageString($img,4,($image_width/2)-(ImageFontWidth(4)),0,$prozent." %",$txt);
Am Schluss müssen wir dem Browser dann sagen, dass es sich hierbei um ein Bild handelt und er es also als als PNG-Datei ausgibt:
PHP-Code:
// Browser sagen das es sich bei dieser Datei um ein Bild des Typs PNG handelt
Header("Content-type: image/png");
// Bild ausgeben
ImagePNG($img);
// Speicher wieder freigeben
ImageDestroy($img);
?>
Wir rufen das Bild nun so auf:
Code :
1
| <img src="poll_img.php?p=23&col=b" alt=".."> |
Wobei "p="die Prozentzahl sein muss ( in % aber ohne % zeichen) und "col=" eine der verwendeten Farben sein muss.
Am Schluss nochmal der ganze Code ohne störende Kommentare:
PHP-Code:
<?
$prozent = $_GET['p'];
$col = $_GET['col'];
$image_width=150;
$image_height=15;
$img=@ImageCreate($image_width,$image_height) OR die("Fehler beim Erstellen des Bildes!");
$background_col=ImageColorAllocate($img,255,255,255);
ImageFill($img,0,0,$background_col);
$ac_x_pos=0;
$ac_color=200;
while($ac_x_pos<($image_width*($prozent / 100 )))
{
switch ( $col )
{
case "r":
$ac_col=ImageColorAllocate($img,$ac_color,120,120);
break;
case "g":
$ac_col=ImageColorAllocate($img,120,$ac_color,120);
break;
case "b":
$ac_col=ImageColorAllocate($img,120,120,$ac_color);
break;
case "y":
$ac_col=ImageColorAllocate($img,$ac_color,$ac_color,120);
break;
case "m":
$ac_col=ImageColorAllocate($img,120,$ac_color,$ac_color);
break;
case "p":
$ac_col=ImageColorAllocate($img,$ac_color,120,$ac_color);
break;
case "gr":
$ac_col=ImageColorAllocate($img,$ac_color,$ac_color,$ac_color);
break;
}
ImageFilledRectangle ( $img, $ac_x_pos, 0, $ac_x_pos+2, $image_height, $ac_col);
$ac_color+=5;
if( $ac_color > 255 )
$ac_color=255;
$ac_x_pos+=2;
}
$gold=ImageColorAllocate($img,251,189,23);
ImageFilledRectangle ( $img, $ac_x_pos, 0, $ac_x_pos+1, $image_height, $gold);
$ac_x_pos+=1;
$grey = 210;
while($ac_x_pos<=$image_width)
{
$ac_col=ImageColorAllocate($img,$grey,$grey,$grey);
ImageFilledRectangle ( $img, $ac_x_pos, 0, $ac_x_pos+2, $image_height, $ac_col);
$grey+=2;
if ($grey > 255)
$grey = 255;
$ac_x_pos+=2;
}
$txt=ImageColorAllocate($img,50,50,50);
ImageString($img,4,($image_width/2)-(ImageFontWidth(4)),0,$prozent." %",$txt);
Header("Content-type: image/png");
ImagePNG($img);
ImageDestroy($img);
?>
Ich hoffe das Tutorial hat euch was gebracht und ich wünsche euch viel Spaß beim experimentieren!
Verwendete Funktionen:
Login
Lesezeichen