Aus gesundheitlichen Gründen kann ich diese Seite nicht weiterpflegen, aktualisieren oder euch Support für eure PHP-Probleme anbieten. PHP für dich bleibt aber in seiner aktuellen Form erhalten und funktioniert nach wie vor als Einstieg in die PHP-Welt - gerade, wenn dich technischere Anleitungen bisher immer davon abgehalten haben.
Mehr dazu...

Schnipsel

PHP - Ein Kreisdiagramm mit gd-lib erzeugen

Vor einiger Zeit habe ich erklärt, wie man mittels einer ganz einfachen Grafik und ebenso einfacher Mathematik ein Balkendiagramm für Umfragen oder Ähnliches erstellt. Es gibt aber natürlich noch viele weitere Diagrammtypen und so kam der Wunsch nach einem Kreisdiagramm auf. Auch das lässt sich relativ problemlos mit PHP realisieren - es benötigt allerdings die Unterstützung der Grafikfähigkeiten der gd-lib. Falls du noch nie damit gearbeitet hast, findest du eine kurze Einführung unter gd-lib Basics. Die Umfrage, auf die ich mich beziehe, fragt nach Lieblingshaustieren und ist sehr simpel gehalten, spielt hierfür aber keine große Rolle, da ich die Daten im Beispiel nicht extra aus einer Datenbank abfrage.

Der Code wird mit Zeilennummern angegeben, diese gehören nicht zum eigentlichen Code, sondern dienen lediglich der besseren Orientierung.

So wird unser Endergebnis aussehen:

Obwohl wir für das Bild das PNG-Format verwenden, das transparente Hintergründe ermöglicht, ist der Hintergrund nicht durchsichtig. Das erfordert weiterführende Funktionen der gd-lib, auf die ich jetzt nicht eingehen möchte.

Ich verwende für dieses Beispiel Werte, die in einem Array gespeichert werden. Das lässt sich entweder über die direkte Angabe im Code - wie wir es in diesem Beispiel machen werden - bewerkstelligen, oder über die Abfrage einer Datenbank - was die im Normalfall übliche Variante sein wird. Wir legen die "Umfrageergebnisse" jetzt aber direkt als Array namens $werte an:

<?php
$werte = array("Katze" => 40, "Hund" => 65, "Nagetier" => 12, "Sonstiges" => 13);

Dieses Array ist unsortiert, wie es auch aus einer Datenbank kommen kann. Der Schlüssel jedes Wertes ist der Name der Tierart, der zugewiesen Wert entspricht der in der Umfrage genannten Anzahl - es ist also kein Prozentwert, sondern die tatsächliche Anzahl der Nennungen des entsprechenden Tieres. Es ist wichtig, dass die Anzahl als Wert festgelegt wird und nicht als Schlüssel. Warum, klärt sich weiter unten.

Im nächsten Schritt definieren wir eine ganze Reihe von Variablen und führen ein paar Berechnungen durch. Die erste Variablengruppe beschäftigt sich mit der Bildgröße und dem gewünschten Radius unseres Diagramms. Außerdem berechnen wir, wo der Mittelpunkt des eigentlichen Diagramms sitzen soll:

 
$breite = 400;
$hoehe = 300;
$radius = 200;
$start_x = ($breite/3)*2;
$start_y = $hoehe/2;

Die Variablen $breite und $hoehe geben die Bildbreite bzw. -höhe in Pixeln an, $radius bestimmt den Radius des Diagramms. Mit diesen Werten berechnen wir danach, wo der Mittelpunkt des Diagramms sein soll. $start_x gibt dabei den horizontalen Startpunk an und $start_y den vertikalen. Horizontal teile ich das gesamte Bild gerne in Drittel auf: das linke Drittel ist für die Legende, die rechten zwei Drittel für das Diagramm selbst. Daher liegt das Zentrum des Kreises und damit mein Startpunkt genau nach zwei Dritteln der Breite, was ich mit Breite/3 * 2 berechne. Vertikal zentriere ich den Kreis einfach innerhalb der Grafik und berechne das mittels Höhe/2.

Als nächstes beschäftigen wir uns mit der Legende zum Diagramm (also das, was links oben zu sehen ist):

 
$rand_oben = 20;
$rand_links = 20;
$punktbreite = 10;
$abstand = 10;
$schriftgroesse = 10;

Die Variablen beschäftigen sich alle ausschließlich mit der Legende:

$rand_oben und $rand_links: Diese beiden Variablen legen den Abstand der Legende zum Rand in Pixeln fest.
$punktbreite: Gibt an, wie groß die bunten Quadrate (die einzelnen "Punkte") sein sollen. Der Wert entspricht der Kantenlänge in Pixeln.
$abstand: Der vertikale Abstand zwischen den einzelnen Punkten, ebenfalls in Pixeln.
$schriftgroesse: Der Schriftgrad der Beschriftung in Punkt.

Im nächsten Schritt erstellen wir die Grundlage für die Grafik.

 
$diagramm = imagecreatetruecolor($breite, $hoehe);

Durch die Funktion imagecreatetruecolor erstellen wir eine Variable, die unsere Grafik ansprechbar - und damit auch bearbeitbar - macht. Wir wählen dafür die Variable $diagramm (jede andere ist aber natürlich genauso denkbar. In Klammer geben wir die Variablen für die Breite und die Höhe unserer Grafik an.

Die nächsten Variablen, die wir festlegen, betreffen die Farben:

 
$schwarz = imagecolorallocate($diagramm, 0, 0, 0);
$weiss = imagecolorallocate($diagramm, 255, 255, 255);
 
$r = 0;
$g = 45;
$b = 45;
$farbabstufung = 40;

Die ersten zwei Zeilen legen schwarz und weiß als Standardfarben fest. Die notwendige Funktion ist imagecolorallocate und sie benötigt die Angabe unseres Bildes - das in der Variable $diagramm hinterlegt ist -, sowie der Rot-, Gelb- und Blauwerte der jeweiligen Farbe. Bei schwarz und wei&szli;g ist das sehr einfach, da wir schwarz durch die Angabe von dreimal 0 erhalten und weiß durch dreimalige Angabe von 255. Andere Farben kann man sich z. B. über Grafikprogramme oder Webdienste heraussuchen.

Schwieriger wird es bei den Farben der einzelnen Felder. Dafür gibt es verschiedene Möglichkeiten. Die genaueste Methode ist es, die Farben im Voraus fest zu bestimmen. Das hat allerdings den Nachteil, dass man von Anfang an wissen muss, wie viele Farben man maximal braucht, da sonst nicht für alle Felder Farben vorhanden sind. Diese Variante erkläre ich unter Kreisdiagramm mit festen Farben.
Die flexibelste Variante wäre es, die Farben einfach per Zufall bestimmen zu lassen. Das kann allerdings zu sehr seltsamen Farbzusammenstellungen führen, da diese ja komplett zufällig sind. Um das etwas hübscher zu gestalten, kann man jedoch zusätzlich einen Farbton vorgeben, was aber den Nachteil hat, dass die Farben relativ ähnlich sind und dadurch schwerer zu unterscheiden. Für dieses Beispiel verwende ich dennoch diese Variante.

Mit den Variablen $r, $g und $b werden die RGB-Werte unseres Grundfarbtons festgelegt. In unserem Fall ist das ein dunkles Türkis/Petrol. Mit dem Wert, den wir in der Variable $farbabstufung angeben, bestimmen wir, wie stark der Farbton aufgehellt oder abgedunkelt werden soll. Ob der Farbton dunkler oder heller werden soll, können wir später entscheiden.

Nachdem wir jetzt die Farben definiert haben, können wir unsere Grafik mit einer Hintergrundfarbe füllen:

 
imagefill($diagramm, 0, 0, $weiss);

Das funktioniert mit der Funktion imagefill, der wir ein paar Werte übergeben. Der erste Wert ist wieder unsere Bild-Variable, danach folgen die x- und y-Koordinaten ab der das Bild mit der Farbe (die in der 4. Variable angegeben ist) gefüllt werden soll. Wenn der ganze Hintergrund ausgefüllt werden soll, gibt man für beide Werte 0 an.

Jetzt sind wir fast fertig mit den Vorarbeiten, es fehlen nur noch ein paar Kleinigkeiten:

 
$i = 0;
$winkel = 0;
arsort($werte);
$gesamt = array_sum($werte);

Wir definieren eine ganz simple Zählvariable namens i, die den (Start-)Wert 0 zugewiesen bekommt, ebenso eine Variable namens $winkel, die den gleichen Wert bekommt und die ich später erkläre.

Außerdem sortieren wir unser Array mittels arsort. Diese Funktion sorgt dafür, dass die Zuordnung der Werte zu ihrem jeweiligen Schlüssel erhalten bleibt und das Array absteigend entsprechend der Werte (die ja die Anzahl der Tiere enthalten) sortiert wird.

Dann berechnen wir noch die Gesamtsumme aller Werte - hierfür ist es unbedingt erforderlich, dass die Anzahl als Wert im Array gespeichert ist. Dann hilft die Funktion array_sum, der wir nur das Array $werte übergeben müssen und schon haben wir die Gesamtsumme in der Variable $gesamt gespeichert.

Was jetzt kommt, dient der eigentlichen Erstellung des Diagramms inklusive der Legende und ist auf den ersten Blick etwas umständlich, bedarf aber eigentlich nur einiger Berechnungen. Ich zeige zunächst den gesamten Code und gehe ihn dann Schritt für Schritt durch:

foreach($werte as $key => $value)
{
  $i++;
  $start = $winkel;
  $winkel = $start + $value*360/$gesamt;
 
  $color = imagecolorallocate($diagramm, $r+($i-1)*$farbabstufung, $g+($i-1)*$farbabstufung, $b+($i-1)*$farbabstufung);
 
  imagefilledarc($diagramm, $start_x, $start_y, $radius, $radius, $start, $winkel, $color, IMG_ARC_PIE);
 
  $unterkante = $rand_oben+$punktbreite+($i-1)*($punktbreite+$abstand);
  imagefilledrectangle($diagramm, $rand_links, $rand_oben+($i-1)*($punktbreite+$abstand), $rand_links+$punktbreite, $unterkante, $color);
  imagettftext($diagramm, $schriftgroesse, 0, $rand_links+$punktbreite+5, $unterkante-$punktbreite/2+$schriftgroesse/2, $schwarz, "arial.ttf", $key." ".round($value*100/$gesamt, 0)." %");
}

Die Anzeige des Diagramms erfolgt komplett über eine foreach-Schleife. Diese Schleife durchläft das gesamte Array $werte und setzt dabei den Schlüssel in die Variable $key und den zugehörigen Wert in die Variable $value.

Innerhalb der Schleife - also bei jedem Durchlauf - erhöhen wir zunächst die Zählvariable um 1, um später Berechnungen damit anstellen zu können.

  $start = $winkel;
  $winkel = $start + $value*360/$gesamt;

Danach definieren wir eine neue Variable namens $start, der wir den Wert der Variable $winkel zuweisen. Dieser Wert ist beim ersten Durchlauf der Schleife 0, da wir das in Zeile 29 so festgelegt haben. Bei jedem weiteren Schleifendurchlauf ist der Wert aber ein anderer, da wir diesen im nächsten Schritt neu berechnen.

Die Variable $winkel hilft uns dabei, das eigentliche Diagramm zu erstellen. Sie gibt an, wie viel des Kreises für jeden einzelnen Wert beansprucht werden. Der gesamte Kreis hat 360°, jeder Teil des Kreises hat also entsprechend weniger - ein halber Kreis etwa 180°, ein viertel Kreis 90° usw. Wie viel Grad welcher Teil des Kreises benötigt, hängt davon ab, wie groß sein Anteil an der Gesamtmenge ist. Um das zu berechnen, benötigen wir den Wert aus dem Array. Diesen multiplizieren wir mit 360 und dividieren ihn anschließend durch die Gesamtsumme aller Array-Werte, die immer noch in der Variable $gesamt gespeichert ist.

Dieser Wert alleine würde nur die Größe des Tortenstücks angeben. Wir benötigen aber zusätzlich noch die tatsächliche Position im Kreis. Dabei hilft uns die Variable $start weiter, die dafür sorgt, dass wir genau festlegen können, wo ein Abschnitt anfängt und wo er endet. Ein Beispiel um das besser zu erklären:

Nehmen wir an, wir haben nur zwei Werte. Beide sind gleich groß, sie bekommen also jeweils die Hälfte des Kreises zugewiesen, also jeweils 180. Der erste Abschnitt beginnt bei 0° und ist 180° groß. Der zweite Abschnitt darf also nicht ebenfalls bei 0° beginne, sondern erst bei 180° und muss dafür bis 360° gehen.

Genau dafür sorgen wir jetzt, indem wir für die Variable $winkel den Startpunkt (der in der Variable $start gespeichert ist) zur Abschnitsgröße hinzu addieren. Das ergibt dann den Endpunkt des Abschnitts, der im nächsten Schleifendurchlauf zum neuen Startpunkt wird usw.

  $color = imagecolorallocate($diagramm, $r+($i-1)*$farbabstufung, $g+($i-1)*$farbabstufung, $b+($i-1)*$farbabstufung);

Hiermit legen wir die Farbe für den Abschnitt des jeweils aktuellen Schleifendurchlaufs fest. Wir benutzen dafür die Funktion imagecolorallocate und berechnen die benötigten Werte für die Rot-, Gelb- und Blauanteile und speichern die Farbe für die spätere Verwendung in der Variable $color.

Bei der Berechnung hilft uns die vorher festgelegte Zählvariable $i. Sie sorgt dafür, dass wir die Farbe jedes Mal ein weniger heller oder dunkler machen können. Um die Ursprungsfarbe heller zu machen, müssen wir die einzelnen Farbwerte erhöhen, um sie dunkler zu machen, müssen wir sie subtrahieren. Als Wert verwenden wir dafür das, was wir in der Variable $farbabstufung angegeben haben und multiplizieren es mit $i, da das unsere Schleifendurchläufe "mitzählt".

Im ersten Durchgang soll unsere Farbe einfach der Ursprungsfarbe entsprechen. Erst in späteren Durchgängen soll die Farbe verändert werden. Wir könnten jetzt mit einer if-Abfrage überprüfen, ob wir uns im ersten Durchgang befinden, oder bereits in einem späteren sind und nur in diesem Fall die Farbe anpassen. Einfacher ist es aber, wenn wir das direkt bei unserer Berechnung bedenken und für die Berechnung $i-1 verwenden. Das ergibt dann für den ersten Schleifendurchlauf 0 und das multipliziert mit dem Wert für die Abstufung ist natürlich auch 0, was dazu führt, dass die erste Schleife dir Ursprungsfarben verwendet und erst später hellere oder dunklere Farben verwendet werden.

  imagefilledarc($diagramm, $start_x, $start_y, $radius, $radius, $start, $winkel, $color, IMG_ARC_PIE);

Das ist das Herzstück des Diagramms - dadurch entsteht unser Kreis.

Die Funktion imagefilledarc zeichnet ein gefülltes Kreissegment, also genau das, was unser Diagramm benötigt. Die Anzahl an zu übergebenden Werten ist etwas verwirrend, aber dadurch, das wir zunächst alles in Variablen gespeichert haben, erklärt es sich nahezu von selbst.

Zuerst übergeben wir die Variable unserer Grafik, danach folgen die Startkoordinaten, die den Mittelpunkt des Kreises angeben und bei uns in den Variablen $start_x und $start_y hinterlegt sind. Danach geben wir zweimal den Radius an - zweimal, weil PHP es ermöglicht, damit auch Ellipsen zu zeichnen. Die erste Radiusangabe ist also eigentlich die Breite des Kreises und die zweite die Höhe. Danach folgt das, was wir vorhin berechnet haben: Die Angabe des Startpunktes dieses Kreissegmentes und der Winkel bzw. der Endpunkt. Anschließend müssen wir noch die gewünschte Farbe angeben, die wir vorhin festgelegt haben und zu guter Letzt den gewünschten "Stil" angeben - in unserem Fall ist das IMG_ARC_PIE, was dafür sorgt, dass die Ecken abgerundet werden und einen schönen Kreis bzw. ein Tortenstück ergeben.

Nur mit diesem Code hätten wir schon ein vollständiges Kreisdiagramm. Mit jedem Schleifendurchlauf kommt ein weiteres Stück des Kreises hinzu, bis alle Werte eingezeichnet wurden. Im nächsten Schritt, möchte ich aber noch für eine Beschriftung sorgen:

  $unterkante = $rand_oben+$punktbreite+($i-1)*($punktbreite+$abstand);
  imagefilledrectangle($diagramm, $rand_links, $rand_oben+($i-1)*($punktbreite+$abstand), $rand_links+$punktbreite, $unterkante, $color);
  imagettftext($diagramm, $schriftgroesse, 0, $rand_links+$punktbreite+5, $unterkante-$punktbreite/2+$schriftgroesse/2, $schwarz, "arial.ttf", $key." ".round($value*100/$gesamt, 0)." %");

Die Beschriftung, oder Legende, soll am linken Rand der Grafik sein und ein kleines Kästchen in der Farbe des jeweiligen Abschnittes haben, sowie eine Beschriftung aufweisen, was mit diesem Abschnitt dargestellt wird und wie viel Prozent der Abschnitt belegt.

Wir berechnen dafür zunächst eine Variable namens $unterkante. Es ist nicht notwendig, diesen Wert extra in eine Variable zu speichern, es macht aber die späteren Berechnungen verständlicher. Die Unterkante entspricht der - Überraschung! - Unterkante eines Kästchens. Mit jedem Schleifendurchlauf sitzt diese Unterkante natürlich ein Stück tiefer, weswegen sie immer neu berechnet werden muss. Sie setzt sich zusammen aus dem Abstand von oben (=$rand_oben), der Höhe eines Kästchens (=$punktbreite), sowie so oft der Kästchenhöhe plus dem Abstand zwischen den einzelnen Zeilen, wie die Schleife durchlaufen wurde - jedoch wieder minus 1, wie wir es schon bei der Farbberechnung hatten. Auch hier dient es dazu, dass alles tatsächlich dort beginnt, wo wir es festgelegt haben.

Danach erzeugen wir mit imagefilledrectangle ein gefülltes Rechteck. Die übergebenen Werte entsprechen der Bild-Variable, der x- und y-Koordinate der linken, oberen Ecke, der x- und y-Koordinate der rechten, unteren Ecke und der Farbe.

Die x-Koordinate der linken, oberen Ecke ergibt sich einfach aus dem gewünschten Abstand zum linken Rand, den wir bereits in der Variable $rand_links gespeichert haben.
Die y-Koordinaten der linken, oberen Ecke ist im ersten Durchlauf der Schleife, ebenfalls einfach der Abstand zum (in diesem Fall allerdings oberen) Rand. In jedem weiteren Schleifendurchlauf rutscht diese Koordinate aber ein Stück tiefer und wir müssen sie daher berechnen. Sie ist dann der Abstand zum Rand (=$rand_oben) plus die Kästchenbreite und der Abstand multipliziert mit dem Schleifendurchlauf (=$i).
Die x-Koordinate der rechten, unteren Ecke ist wiederum recht einfach. Sie entspricht dem Abstand zum linken Rand, plus der Kästchenbreite.
Die y-Koordinate der rechten, unteren Ecke entspricht dem, was wir bereits in der Variable $unterkante berechnet haben, weswegen wir hier direkt die Variable einsetzen können.

Als letzten Wert geben wir jetzt noch die Variable $color an, um die gleiche Farbe zu verwenden, wie vorhin beim Kreisabschnitt.

Was unserer Legende jetzt noch fehlt, ist die Beschriftung.

Dafür nutzen wir die Funktion imagegettfttext. Eine genauere Erklärung findet sich unter "gd-lib Text". Hier möchte ich nur kurz auf ein paar der übergebenen Werte eingehen. Nach der Bildvariable und der Schriftgröße folgt die Angabe 0 (der Winkel des Textes) und danach die x-Koordinate, bei der der Text beginnt. Das ist sehr einfach zu berechnen, da er rechts vom Kästchen beginnen soll, also Abstand zum Rand plus Kästchenbreite plus ein Abstand zwischen Kästchen und Text, den ich fix auf 5 (Pixel) gesetzt habe.

Der nächste Wert gibt die y-Koordinate des Textes an, also der Punkt, an dem die Unterkante des Textes liegt. Dieser Wert ist etwas schwieriger zu berechnen und soll dafür sorgen, dass der Text vertikal zentriert wird. Wir gehen dafür von der Unterkante des Kästchen aus und subtrahieren davon die Hälfte der Kästchenbreite. Damit sind wir genau bei der Hälfte des Kästchens. Wir müssen jetzt jedoch bedenken, dass die Schrift, um tatsächlich zentriert zu sein, ein Stückchen tiefer sitzen muss. Dieses "Stückchen tiefer" entspricht der Hälfte der Textgröße, die wir zu dem Wert hinzuaddieren, um wieder etwas tiefer zu kommen.

Danach geben wir noch die Schriftfarbe und die Schriftart und schließlich den gewünschten Text an. Dieser Text ist die letzte Berechnung, die wir benötigen. Er setzt sich zusammen aus:

$key." ".round($value*100/$gesamt, 0)." %"

Mit $key geben wir den Inhalt der Variable $key (also den Schlüssel des Array-Eintrags) aus. Danach folgt ein Punkt um den nächsten Teil mit diesem zu verbinden. Mit " " fügen wir ein Leerzeichen hinzu, danach kommt eine weitere Verbindung mittels Punkt. Im Anschluss berechnen wir den Prozentwert und runden ihn mit der Funktion round auf eine Ganzzahl. Den Prozentwert selbst berechnen wir durch den Einzelwert (=$value) mal 100, geteilt durch die Gesamtsumme (=$gesamt) - eine ganz normale Prozentrechnung also. Anschließend folgt ein weitere Punkt zur Verbindung, gefolgt von dem letzten Textteil, in Form von " %".

Nun muss nur noch die Schleife beendet werden und das Bild in eine Datei geschrieben werden (das funktioniert nur, wenn Schreibrechte für das Verzeichnis vorhanden sind) - oder alternativ direkt die PHP-Datei als Bild erzeugt werden, wie unter gd-lib Datei beschrieben.

imagepng($diagramm, "kreisdiagramm.png");
?>

Der gesamte Code in der Übersicht (die Variante mit festen Farben findest du unter Kreisdiagramm 2):

<?php
$werte = array("Katze" => 40, "Hund" => 65, "Nagetier" => 12, "Sonstiges" => 13);
 
$breite = 400;
$hoehe = 300;
$radius = 200;
$start_x = ($breite/3)*2;
$start_y = $hoehe/2;
 
$rand_oben = 20;
$rand_links = 20;
$punktbreite = 10;
$abstand = 10;
$schriftgroesse = 10;
 
$diagramm = imagecreatetruecolor($breite, $hoehe);
 
$schwarz = imagecolorallocate($diagramm, 0, 0, 0);
$weiss = imagecolorallocate($diagramm, 255, 255, 255);
 
$r = 0;
$g = 45;
$b = 45;
$farbabstufung = 40;
 
imagefill($diagramm, 0, 0, $weiss);
 
$i = 0;
$winkel = 0;
arsort($werte);
$gesamt = array_sum($werte);
foreach($werte as $key => $value)
{
  $i++;
  $start = $winkel;
  $winkel = $start + $value*360/$gesamt;
 
  $color = imagecolorallocate($diagramm, $r+($i-1)*$farbabstufung, $g+($i-1)*$farbabstufung, $b+($i-1)*$farbabstufung);
 
  imagefilledarc($diagramm, $start_x, $start_y, $radius, $radius, $start, $winkel, $color, IMG_ARC_PIE);
 
  $unterkante = $rand_oben+$punktbreite+($i-1)*($punktbreite+$abstand);
  imagefilledrectangle($diagramm, $rand_links, $rand_oben+($i-1)*($punktbreite+$abstand), $rand_links+$punktbreite, $unterkante, $color);
  imagettftext($diagramm, $schriftgroesse, 0, $rand_links+$punktbreite+5, $unterkante-$punktbreite/2+$schriftgroesse/2, $schwarz, "arial.ttf", $key." ".round($value*100/$gesamt, 0)." %");
}
imagepng($diagramm, "kreisdiagramm.png");
?>

Autor: Claudia Unkelbach