| |
| * Link führt ins Internet |
|
| |
GD-Funktionen in der Praxis
|
|
Die Erstellung von Grafiken, für beispielsweise statistische Erhebungen in Form von Linien- und Säulendiagrammen und dies in Echtzeit, stellen mit Hilfe der GD-Bibliothek kein Problem dar.
Text via GD-Funktionen
Als erstes wollen wir Sie mit einem Beispiel konfronitieren, welches Sie einfach mal ausprobieren sollten.
Beispiel
<?php
// Dokument Header mit MIME-Typ festlegen
header("Content-type: image/png");
$bild = ImageCreate(400,400);
$hintergrund = imagecolorallocate($bild, 255, 255, 255);
$farbeSchwarz = imagecolorallocate($bild, 0, 0, 0);
// Eingebaute GD-Bibliothek Schriftarten verwenden
ImageString($bild, 4, 10, 10, 'PHP Praxis', $farbeSchwarz);
// TrueType-Schriftarten verwenden
// ImageTTFText($bild, 20, 0, 10, 50, $farbeSchwarz, '/pfad/zum/font.ttf','PHP Praxis');
// Vertikaler Text
ImageStringUp($bild, 4, 10, 150, 'PHP Praxis', $farbeSchwarz);
// Bild ausgeben
imagepng($bild);
// Bild aus Speicher entfernen
imagedestroy($bild);
?>
|
Sie sollten sich die Ausgabe genau betrachten und anschliessend mit den Werten experimentieren.
Liniendiagramme
Zur Illustration, wie man mit PHP dynamisch Grafiken erzeugen kann, sollen hier einige Diagramme erstellt werden. Das erste Beispiel stellt ein Liniendiagramm auf einem Raster dar.
Zum Aufrufen einer dynamisch erzeugten Grafik auf einer Webseite genügt es, einen Link zu der PHP-Seite zu setzen, welche die Grafik an den Browser weiterleitet. Das ![]() -Tag ist hierfür bestens geeignet, wie das folgende Beispiel zeigt:
<html>
<head>
<title>GD-Bibliothek in der Praxis</title>
</head>
<body>
<h1>Liniendiagramm</h1><p>
<img src="diagramm.php"><br>
</body>
</html>
|
Nun zum eigentlichen Code, der die Grafik erzeugt. Hier die einzelnen Bestandteile des Quellcodes von diagramm.php:
// Diagramm Werte
$daten=array(0,125,100,238,200,175,100,200,250,225,125);
|
Zuerst werden die Werte für das Diagramm angegeben. Im vorliegenden Beispiel befinden sich die Werte in einem Array $daten. Sie könnten ebenso gut aus einer XML-Datei, einem Formular oder einer Datenbank stammen. Die Werte reichen von 0 bis 250, den Abmessungen der Grafik in Pixel. Der Wert legt die Anfangsposition jedes Diagrammsegments im Raster fest. Falls Sie Werte zwischen 0 und 100 verwenden möchte, wie bei Prozentangaben, müssen Sie den jeweiligen Wert nur mit Faktor 2.5 multiplizieren, um die Pixelposition im Raster zu bestimmen. Der Faktor ergibt sich hierbei aus den Maßen des Bildes:
Fallbeispiel
250x250 -> 250/100 -> 2.5
Als nächstes wird ein PNG-Header verschickt und die Breite und Höhe der Grafik festgelegt:
// PNG-Grafik definieren
header("Content-type: image/png");
// Breite/Höhe des Diagramm
$imgBreite=250;
$imgHoehe=250;
|
PNG steht übrigens für Portable Network Graphic, ein verlustfreies Grafikformat.Nun kann das Image-Objekt erzeugt und die Farben für das Diagramm festgelegt werden:
// Image-Objekt erzeugen und Farben definieren
$bild=imagecreate($imgHoehe, $imgBreite);
$farbeWeiss=imagecolorallocate($bild, 255, 255, 255);
$farbeGrau=imagecolorallocate($bild, 192, 192, 192);
$farbeBlau=imagecolorallocate($bild, 0, 150, 255);
|
Der Hintergrund wird weiß sein, das Raster grau und die Linien des Liniendiagramm blau. Durch Erstellen weiterer Variablen und Festlegen anderer RGB-Werte lassen sich Farben problemlos ändern oder hinzufügen. Als Nächstes wird ein grauer Rand für die Grafik erzeugt, und zwar für jede Kante einzeln mithilfe der imageline()-Funktion:
// Rand für die Grafik erzeugen
imageline($bild, 0, 0, 0, 250, $farbeGrau);
imageline($bild, 0, 0, 250, 0, $farbeGrau);
imageline($bild, 249, 0, 249, 249, $farbeGrau);
imageline($bild, 0, 249, 249, 249, $farbeGrau);
|
Es gilt jeweils zwei x/y-Koordinaten festzulegen. Jedes der Wertepaare in der imageline()-Funktion gibt einen Start- und Endpunkt innerhalb der Grafik an. Zur Vervollständigung des Rasters werden im regelmäßigen Abstand von 25 Pixel auf der x/y-Achse weitere graue Linien hinzugefügt:
// Raster erzeugen
for ($i=1; $i<count($daten); $i++){
imageline($bild, $i*25, 0, $i*25, 250, $farbeGrau);
imageline($bild, 0, $i*25, 250, $i*25, $farbeGrau);
}
|
Position (0,0) bezieht sich auf die linke obere Ecke des Rasters und Position (250,250) auf die untere rechte Ecke. Dies entspricht genau den Abmessungen der Grafik. Zur Erzeugung des Liniendiagramms werden sämtliche Werte des Arrays in einer Schleife durchlaufen und so Start- und Endpunkt jedes Liniensegments bestimmt:
// Liniendiagramm erzeugen
for ($i=0; $i<count($daten); $i++){
imageline($bild, $i*25, (250-$daten[$i]),
($i+1)*25, (250-$daten[$i+1]), $farbeBlau);
}
|
PHP erzeugt mit Hilfe der imageline()-Funktion eine blaue Linien zwischen den aufeinanderfolgenden Koordinaten. Das vorliegende Beispiel besitzt lediglich elf Werte, aber man kann dieses Verfahren leicht ausbauen und komplexe Diagramme wie Börsenindizes oder Ähnliches erstellen.
Abschliessend muss die Grafik zur Ausgabe an den Browser verschickt und der Speicherplatz auf dem Server wieder freigegeben werden:
// Diagramm ausgeben und Grafik
// aus dem Speicher entfernen
imagepng($bild);
imagedestroy($bild);
|
Beispiel - vollständig
<?php
// Diagramm Werte
$daten=array(0,125,100,238,200,175,100,200,250,225,125);
// PNG-Grafik definieren
header("Content-type: image/png");
// Breite/Höhe des Diagramm
$imgBreite=250;
$imgHoehe=250;
// Image-Objekt erzeugen und Farben definieren
$bild=imagecreate($imgHoehe, $imgBreite);
$farbeWeiss=imagecolorallocate($bild, 255, 255, 255);
$farbeGrau=imagecolorallocate($bild, 192, 192, 192);
$farbeBlau=imagecolorallocate($bild, 0, 150, 255);
$farbeHellblau=imagecolorallocate($bild, 0, 200, 255);
// Rand für die Grafik erzeugen
imageline($bild, 0, 0, 0, 250, $farbeGrau);
imageline($bild, 0, 0, 250, 0, $farbeGrau);
imageline($bild, 249, 0, 249, 249, $farbeGrau);
imageline($bild, 0, 249, 249, 249, $farbeGrau);
// Raster erzeugen
for ($i=1; $i<count($daten); $i++){
imageline($bild, $i*25, 0, $i*25, 250, $farbeGrau);
imageline($bild, 0, $i*25, 250, $i*25, $farbeGrau);
}
// Liniendiagramm erzeugen
for ($i=0; $i<count($daten); $i++){
imageline($bild, $i*25, (250-$daten[$i]),
($i+1)*25, (250-$daten[$i+1]), $farbeBlau);
}
// Diagramm ausgeben und Grafik
// aus dem Speicher entfernen
imagepng($bild);
imagedestroy($bild);
?>
|
Sie sollten die Liniendiagramm Schleife mal durch folgende Codezeilen ersetzen und austesten:
// Liniendiagramm erzeugen
for ($i=0; $i<count($daten); $i++){
imageline($bild, $i*25, (250-$daten[$i]),
($i+1)*25, (250-$daten[$i+1]), $farbeBlau);
imageellipse($bild, $i*25, (250-$daten[$i]), 8, 8, $farbeBlau);
}
|
oder
// Liniendiagramm erzeugen
for ($i=0; $i<count($daten); $i++){
imageline($bild, $i*25, (250-$daten[$i]),
($i+1)*25, (250-$daten[$i+1]), $farbeBlau);
imagefilledellipse($bild, $i*25, (250-$daten[$i]), 8, 8, $farbeBlau);
}
|
Sie sehen Ihrer Fanatsie sind kaum Grenzen gesetzt.
Säulendiagramm
Das vorliegende Beispiel lässt sich mit einigen Handgriffen recht einfach zur Erzeugung von Säulendiagrammen umwandeln.
Die Funktion imagefilledrectangle() erzeugt zwei Sorten von Rechtecken: Die dunkelblauen Säulen repräsentieren die Werte aus dem Array $daten, und die hellblauen füllen die Zwischenräume aus:
// Säulendiagramme erzeugen
for ($i=0; $i<count($daten); $i++){
imagefilledrectangle($bild, $i*25, (250-$daten[$i]),
($i+1)*25, 250, $farbeBlau);
imagefilledrectangle($bild, ($i*25)+1,
(250-$daten[$i])+1,
(($i+1)*25)-5, 248, $farbeHellblau);
}
|
Für den Hellblauen Farbwert müssen Sie noch folgende Zeile im Skript platzieren:
$farbeHellblau=imagecolorallocate($bild, 0, 200, 255);
|
Beispiel - vollständig
<?php
// Diagramm Werte
$daten=array(0,125,100,238,200,175,100,200,250,225,125);
// PNG-Grafik definieren
header("Content-type: image/png");
// Breite/Höhe des Diagramm
$imgBreite=250;
$imgHoehe=250;
// Image-Objekt erzeugen und Farben definieren
$bild=imagecreate($imgHoehe, $imgBreite);
$farbeWeiss=imagecolorallocate($bild, 255, 255, 255);
$farbeGrau=imagecolorallocate($bild, 192, 192, 192);
$farbeBlau=imagecolorallocate($bild, 0, 150, 255);
$farbeHellblau=imagecolorallocate($bild, 0, 200, 255);
// Rand für die Grafik erzeugen
imageline($bild, 0, 0, 0, 250, $farbeGrau);
imageline($bild, 0, 0, 250, 0, $farbeGrau);
imageline($bild, 249, 0, 249, 249, $farbeGrau);
imageline($bild, 0, 249, 249, 249, $farbeGrau);
// Raster erzeugen
for ($i=1; $i<count($daten); $i++){
imageline($bild, $i*25, 0, $i*25, 250, $farbeGrau);
imageline($bild, 0, $i*25, 250, $i*25, $farbeGrau);
}
// Säulendiagramme erzeugen
for ($i=0; $i<count($daten); $i++){
imagefilledrectangle($bild, $i*25, (250-$daten[$i]),
($i+1)*25, 250, $farbeBlau);
imagefilledrectangle($bild, ($i*25)+1,
(250-$daten[$i])+1,
(($i+1)*25)-5, 248, $farbeHellblau);
}
// Diagramm ausgeben und Grafik
// aus dem Speicher entfernen
imagepng($bild);
imagedestroy($bild);
?>
|
| Hinweis: Sie sollten allerdings einen wichtigen Aspekt nicht aus den Augen verlieren, wenn man solche Grafiken serverseitig erzeugt: Sie belasten den Prozessor nicht unerheblich. Wenn man zu viele dieser dynamischen Grafiken auf einer Website verwendet, wird es zu Performance-Einbußen kommen. |
Abschliessend wollen wir Ihnen noch den Quellcode für die wohl flexibelste Umsetzung des Linien- und Säulendiagramms zur Verfügung stellen:
Beispiel
<?php
// PNG-Grafik definieren
header("Content-type: image/png");
// Diagramm Werte (Prozentangaben)
$daten=array(0,50,40,100,80,70,40,80,95,90,50);
// Prozentumrechnung + grössen Faktor
function setProzent($faktor) {
global $daten;
for ($i = 0; $i < count($daten); $i++) {
$daten[$i] = round($daten[$i]*$faktor);
}
}
// Breite/Höhe des Diagramm
$imgDim = 250;
// Ausführen
setProzent($imgDim/100);
$bfaktor = $imgDim/(count($daten)-1);
// Image-Objekt erzeugen und Farben definieren
$bild=imagecreate($imgDim, $imgDim);
$farbeWeiss=imagecolorallocate($bild, 255, 255, 255);
$farbeGrau=imagecolorallocate($bild, 192, 192, 192);
$farbeBlau=imagecolorallocate($bild, 0, 150, 255);
$farbeHellblau=imagecolorallocate($bild, 0, 200, 255);
// Rand für die Grafik erzeugen
imageline($bild, 0, 0, 0, $imgDim, $farbeGrau);
imageline($bild, 0, 0, $imgDim, 0, $farbeGrau);
imageline($bild, $imgDim-1, 0, $imgDim-1, $imgDim-1, $farbeGrau);
imageline($bild, 0, $imgDim-1, $imgDim-1, $imgDim-1, $farbeGrau);
// Raster erzeugen
for ($i=1; $i<count($daten); $i++){
imageline($bild, $i*$bfaktor, 0, $i*$bfaktor, $imgDim, $farbeGrau);
imageline($bild, 0, $i*$bfaktor, $imgDim, $i*$bfaktor, $farbeGrau);
}
// Liniendiagramm erzeugen
for ($i=0; $i<count($daten); $i++){
imageline($bild, $i*$bfaktor, ($imgDim-$daten[$i]),
($i+1)*$bfaktor, ($imgDim-$daten[$i+1]), $farbeBlau);
imagefilledellipse($bild, $i*$bfaktor, ($imgDim-$daten[$i]), 6, 6, $farbeBlau);
}
// Diagramm ausgeben und Grafik
// aus dem Speicher entfernen
imagepng($bild);
imagedestroy($bild);
?>
|
Zusatze – Säulendiagramm
// Säulendiagramme erzeugen
for ($i=0; $i<count($daten); $i++){
imagefilledrectangle($bild, $i*$bfaktor, ($imgDim-$daten[$i]),
($i+1)*$bfaktor, $imgDim, $farbeBlau);
imagefilledrectangle($bild, ($i*$bfaktor)+1,
($imgDim-$daten[$i])+1,
(($i+1)*$bfaktor)-5, $imgDim-2, $farbeHellblau);
}
|
Wie Sie sehen können Sie die Dimension des Diagramms nun flexibel über die Variable $imgDim festlegen. Das Codezeilen wurden zusätzlich so angepasst, dass die Daten aus dem Array $daten in Form von Prozentangaben erfolgen können.
Tortendiagramme
Einige von Ihnen werden sich sicher die Frage stellen, wie es um die Umsetzung von Tortendiagrammen gestellt ist – die Lösung bietet Ihnen die Funktion imagefilledarc(). Hiermit wird die Realisierung von Tortendiagramme zum Kinderspiel, na ja sagen wir fast.
Beispiel
<?php
// Header (MIME-Typ)
header('Content-type: image/png');
// Image-Objekt erzeugen
$bild = imagecreate(200, 200);
// Farbwerte festlegen
$hintergrund = imagecolorallocate($bild, 0xFF, 0xFF, 0xFF);
$farbeGrau = imagecolorallocate($bild, 0xC0, 0xC0, 0xC0);
$farbeDunkelGrau = imagecolorallocate($bild, 0x90, 0x90, 0x90);
$farbeBlau = imagecolorallocate($bild, 0x00, 0x00, 0x80);
$farbeDunkelBlau = imagecolorallocate($bild, 0x00, 0x00, 0x50);
$farbeRot = imagecolorallocate($bild, 0xFF, 0x00, 0x00);
$farbeDunkelRot = imagecolorallocate($bild, 0x90, 0x00, 0x00);
// 3D Effekt simulieren
for ($i = 60; $i > 50; $i--) {
imagefilledarc($bild, 50, $i, 100, 50, 0, 55, $farbeDunkelBlau, IMG_ARC_PIE);
imagefilledarc($bild, 50, $i, 100, 50, 55, 135 , $farbeDunkelGrau, IMG_ARC_PIE);
imagefilledarc($bild, 50, $i, 100, 50, 135, 360 , $farbeDunkelRot, IMG_ARC_PIE);
}
// Eigentliches Diagramm
imagefilledarc($bild, 50, 50, 100, 50, 0, 55, $farbeBlau, IMG_ARC_PIE);
imagefilledarc($bild, 50, 50, 100, 50, 55, 135 , $farbeGrau, IMG_ARC_PIE);
imagefilledarc($bild, 50, 50, 100, 50, 135, 360 , $farbeRot, IMG_ARC_PIE);
// Diagramm ausgeben und Grafik
// aus dem Speicher entfernen
imagepng($bild);
imagedestroy($bild);
?>
|
|
|
|
|
|
|
|
SELFPHP
SELFPHP - Damir Enseleit, info@selfphp.de, Impressum, Kontakt