18.5 Image_Graph 
| Besprochene Version: 0.3.0dev4 | Lizenz: LGPL |
| Klassendatei(en): Image/Graph.php | |
Image_Graph ist eine sehr leistungsfähige Klasse zum Erstellen von Diagrammen und Verlaufskurven. Es handelt sich hierbei um eine Portierung des Pakets GraPHPite, das ursprünglich von Jesper Veggerby entwickelt wurde. Daher ist auch hier trotz des recht frühen Entwicklungsstadiums ein großer Funktionsumfang vorhanden. Die Dokumentation des Pakets auf der PEAR-Website ist sicher noch verbesserungswürdig. Daher möchte ich Ihnen die externe Homepage des Pakets empfehlen, die Sie unter http://pear.veggerby.dk finden. Auf ihr sind auch viele Beispiele zu finden, die Ihnen zeigen, welche Möglichkeiten die Klasse bietet.
Das Paket benötigt die GD-Bibliothek in der Version 1 oder 2, wobei in der Version 1 einige Features nicht unterstützt werden. Des Weiteren wird das PEAR-Paket Image_Color benötigt. Einige zusätzliche Funktionalitäten setzen die Pakete Log, Numbers_Words und Numbers_Roman voraus.
Das grundsätzliche Nutzungsprinzip ist recht einfach. Sie benötigen zuerst ein Image_Graph-Objekt. Dieses ist mit einer Wand vergleichbar. Auf diese Wand kommen dann eine oder mehrere Leinwände, die so genannten Plotareas. Auf einer Plotarea können dann die Graphen ausgegeben werden.
Jedes der oben erwähnten Konstrukte verfügt über eine eigene Klasse mit Konstruktor. Allerdings wird empfohlen, die Objekte über eine Factory-Methode zu instanziieren, die in der Klasse Image_Graph definiert ist. Das hat den Vorteil, dass Sie sich nicht darum kümmern müssen, die benötigten Dateien von Hand zu inkludieren. Lassen Sie mich das an einem einfachen Beispiel verdeutlichen:
// Benoetigte Datei inkludieren require_once('Image/Graph.php'); // Neues Image_Graph-Objekt ableiten $graph = Image_Graph::factory('graph', array(500, 400)); // Neue Plotarea hinzufuegen $plotarea = $graph->addNew('plotarea'); // Datensatz aufbauen $daten = Image_Graph::factory('dataset'); $daten->addPoint('Januar', 11000); $daten->addPoint('Februar',12000); $daten->addPoint('März', 13500); $daten->addPoint('April', 15000); $daten->addPoint('Mai', 18000); $daten->addPoint('Juni', 14000); //Graph auf Basis der Daten plotten $plot = $plotarea->addNew('line', $daten); // Graph ausgeben $graph->done();
Listing 18.6 Ausgabe eines einfachen Graphen
Das Ergebnis von Listing 18.6 sehen Sie in Abbildung 18.5.
Abbildung 18.5 Ausgabe der Grafik im Browser
Die Methode factory() muss statisch aufgerufen werden, da sie ja erst das Objekt generiert, mit dem danach gearbeitet wird. Die Factory-Methode bekommt zuerst den Namen des gewünschten Objekts übergeben. Danach akzeptiert sie ein indiziertes Array, in dem die Parameter für den jeweiligen Konstruktor übergeben werden. Der Konstruktor der Klasse bekommt die Daten in der Reihenfolge übergeben, wie sie in dem Array abgelegt sind. Wenn Sie also ein Objekt mithilfe die Factory-Klasse erstellen wollen, bei dem Sie nicht wissen, welche Informationen es benötigt, können Sie die Dokumentation des jeweiligen Konstruktors zu Rate ziehen.
Die Plotarea wurde in diesem Fall mit der Methode addNew() hinzugefügt. Es wäre auch möglich gewesen, erst mit factory() ein neues Objekt abzuleiten und dann mithilfe von add() dem Graph-Objekt hinzuzufügen. addNew() leistet dasselbe, stellt aber weniger Tipparbeit dar.
Nach dem Hinzufügen der Plotarea werden die benötigten Daten für die Zeichnung in einem Dataset-Objekt zusammengestellt. Wie zu erkennen ist, wird der erste Wert hierbei für die Beschriftung der X-Achse genutzt, wohingegen der zweite Wert auf der Y-Achse abgetragen wird. Diese wird automatisch beschriftet, wobei die Werte linear abgetragen werden. Das Maximum der beiden Achsen leitet sich aus den übergebenen Werten ab.
Nachdem die Daten erfasst worden sind, wird, wiederum mit addNew(), der eigentliche Graph gezeichnet. In diesem Fall habe ich mich für eine einfache Liniendarstellung entschieden, die mithilfe von 'line' selektiert wird.
Die Ausgabe der Grafik übernimmt die Methode done(), die alles, was dem Graph-Objekt hinzugefügt wurde, an den Browser schickt.
18.5.1 Farben
Natürlich können Sie auch Farben für Ihre Grafiken nutzen. Die einfachste Möglichkeit, eine Farbe zu nutzen, besteht darin, sie über ihren Namen anzusprechen. Dazu sind 140 Farben mit einem Namen belegt. Die Namen der Farben mit einem entsprechenden Darstellungsbeispiel finden Sie auf der externen Homepage des Pakets. [Momentan lautet die URL http://pear.veggerby.dk/samples/index.php?sample=00. ] Die geläufigen Farben wie red, green, blue etc. sind alle definiert, so dass man deren Namen beruhigt einsetzen kann. Jede dieser Farben können Sie mit einem Alpha-Kanal versehen, um Transparenzen zu realisieren.
eine Hintergrundfarbe zuweisen, so würde das gewählte Rot nur mit einer 10 %igen Intensität genutzt. Bevorzugen Sie ein 100 %iges Rot, können Sie auch einfach 'red' angeben. Darüber hinaus können Sie noch eine hexadezimale Angabe wie in HTML nutzen, wobei Sie hier auch mit einem Alpha-Kanal arbeiten können.
Die dritte Möglichkeit, eine Farbe zu bestimmen, ist, die RGB-Werte in einem Array zu übergeben. Die Werte der einzelnen Farbkanäle dürfen hierbei von 0 bis 255 laufen. Auch in diesem Fall können Sie mit einem vierten Array-Element den Alpha-Kanal definieren. Dieser ist hierbei allerdings nicht in Prozent, sondern auch mit den Zahlen von 0 bis 255 zu beschreiben. 255 entspricht also 100 %, 127 entspricht 50 % etc.
18.5.2 Linien
Um Linien besser unterscheiden zu können, ist es am einfachsten, mit Farben zu arbeiten. Hierzu ist für alle Linientypen – unabhängig davon, ob es sich um eine Linie in einem Diagramm oder um eine Achse handelt – die Methode setLineColor() vorgesehen, die aus dem Linien-Objekt heraus aufgerufen werden kann. Allerdings sind Farben oft nicht ausreichend. Gerade wenn etwas schwarz-weiß ausgedruckt wird, bringen Farben Sie nicht weiter. Um dieses Problem zu lösen, können Sie auf unterschiedliche Linienarten zurückgreifen. Auch hierbei muss erst ein entsprechendes Linien-Objekt abgeleitet werden. Dazu können Sie auch die Factory-Methode oder addNew() nutzen. Zurzeit sind drei Linienarten definiert. Die Klasse Image_Graph_Line_Solid definiert eine durchgehende Linie, die dem Standard entspricht. Image_Graph_Line_Dotted ist für eine gepunktete Linie zuständig, und Image_Graph_Line_Dashed erzeugt eine gestrichelte Linie.
Die Methoden factory() bzw. addNew() müssen in diesem Fall jeweils den kompletten Namen der Klasse übergeben bekommen, da keine Kurzformen dafür definiert sind. Um eine durchgehende Linie zu erzeugen, reicht es, wenn Sie den Namen der Klasse sowie eine Farbe übergeben. Die beiden anderen Linienarten erfordern zwei Farben, die in einem Array übergeben werden müssen. Die erste Angabe definiert dabei die »Vordergrundfarbe« und die zweite die »Hintergrundfarbe«. Vorder- und Hintergrundfarbe heißt in diesem Fall, dass es sich bei dem Linientyp Dashed um die langen und die kurzen Abschnitte handelt. Bei dem Linientyp Dotted macht das keinen Unterschied. Damit Sie sich keine Gedanken über die eigentliche Hintergrundfarbe machen müssen, können Sie auch 'transparent' als Farbangabe nutzen, um transparente Abschnitte, also Abschnitte in der Hintergrundfarbe, zu erzeugen.
Den Durchmesser einer Linie können Sie mit der Methode setThickness() festlegen. Die Methode setThickness() sollten Sie in Ihrem Projekt jedoch erst ausführlich testen, da sie die Darstellung deutlich verändern kann.
$line = $graph->addNew('Image_Graph_Line_Dotted', array('black', 'transparent')); $line->setThickness(2); $Plot->setLineStyle($line);
18.5.3 Füllungen
Bei Darstellungsarten, die eine Fläche einschließen, also z. B. Balken- oder Tortendiagrammen, können die eingeschlossenen Bereiche eingefärbt werden. Abhängig von der Darstellungsart handelt es sich also entweder um die Fläche, die direkt von den gezeichneten Linien eingeschlossen wird, oder um die Fläche zwischen dem Graphen und der Achse.
In einfachen Fällen nutzen Sie die Methode setFillColor(), die direkt aus dem entsprechenden Image_Graph-Objekt aufgerufen werden kann. Dies bekommt die Füllfarbe entsprechend der oben erläuterten Deklaration übergeben und füllt alle Objekte, die zu dieser Darstellung gehören, mit derselben Farbe.
Nun gibt es aber auch Darstellungstypen, bei denen Flächen unterschiedlich eingefärbt werden sollen. In so einem Fall sieht das Paket die Klasse Image_Graph_Fill_Array vor. In einem Objekt dieser Klasse können verschiedene Farben abgelegt werden, die dann zur Füllung der Darstellung herangezogen werden.
// Fuellfarben definieren $FillArray = Image_Graph::factory('Image_Graph_Fill_Array'); $FillArray->addColor('blue@0.5'); $FillArray->addColor('yellow@0.5'); $FillArray->addColor('green@0.5'); $Plot = $Plotarea->addNew('bar',array($Datasets, 'stacked')); $Plot->setFillStyle($FillArray);
Wie Sie in diesem Beispiel sehen, wird jede Farbe einzeln mit addColor() zugewiesen. Das Image_Graph_Fill_Array-Objekt wird dem eigentlichen Graphen dann mit setFillStyle() zugewiesen.
Die Farben werden später in der Reihenfolge genutzt, wie sie hier abgelegt wurden. Werden mehr Farben benötigt, als in dem Objekt vorhanden sind, werden die Farben wieder von vorn beginnend wiederholt.
18.5.4 Schriftarten
Bevor ich auf die einzelnen Bestandteile der Darstellung eingehe, möchte ich kurz auf die Wahl einer Schriftart eingehen. Sie können einen beliebigen TrueType-Font in den Grafiken nutzen.
Eine Schriftart kann mit der Methode addNew() beim System »angemeldet« werden und dann an den Stellen, an denen sie genutzt werden soll, mithilfe der zurückgegebenen Referenz eingebunden werden. addNew() bekommt hierbei als ersten Parameter den String 'ttf_text' und als zweiten den Namen der Schriftart-Datei übergeben.
Wenn Sie über ein Schriftart-Objekt verfügen, können Sie die Ausgabe der Schrift beeinflussen. Mit setSize() können Sie der Schriftart eine Größe in Pixel für die Ausgabe zuweisen.
Der Winkel, in dem die Schrift ausgegeben wird, kann mit setAngle() definiert werden. Normalerweise wird die Schrift horizontal von links nach rechts ausgegeben. Wenn Sie setAngle() eine Zahl übergeben, wird die Schrift entsprechend dieses Winkels gedreht ausgegeben. Die Drehrichtung ist hierbei entgegen dem Uhrzeigersinn.
Soll die Schrift eine bestimmte Farbe haben, können Sie der Methode setColor() einen Farbwert übergeben, wie oben beschrieben.
Um die Schriftart für alle Ausgaben als Standard zu nutzen, können Sie aus dem Graph-Objekt heraus die Methode setFont() aufrufen und ihr die Referenz auf das Font-Objekt als Parameter übergeben.
$font=$graph->addNew('ttf_font','COUR.TTF'); $font->setAngle(45); $font->setSize(10); $font->setColor('red@0.5'); $graph->setFont($font);
Wie Sie eine Schriftart für bestimmte Teile der Grafik nutzen, ist bei den jeweiligen Erläuterungen der Teile beschrieben.
18.5.5 Die Achsen
Die Achsen des Koordinatensystems werden automatisch erzeugt, so dass man sie in vielen Fällen einfach so übernehmen kann. Allerdings mag das nicht immer gewünscht sein. Wenn Sie beispielsweise ein Tortendiagramm erstellen, sind die Achsen doch eher störend. Um sie zu auszublenden, ist in der Plotarea-Klasse die Methode hideAxis() vorgesehen. Sie unterdrückt die Ausgabe der beiden Achsen und erfordert keinen Parameter. Hierbei ist zu beachten, dass Sie bei Darstellungsarten wie 'line', die sich auf ein Koordinatensystem beziehen, die Ausgabe nicht unterdrücken dürfen, da sonst der gesamte Graph nicht ausgegeben wird.
Möchten Sie die Achsen verändern, ist das auch möglich. Hierzu müssen Sie eine Referenz auf das entsprechende Achsen-Objekt vom Plotarea-Objekt auslesen, wozu die Methode getAxis() definiert ist. Sie erwartet einen Parameter, der definiert, auf welche Achse Sie zugreifen wollen. Hierzu sind die Konstanten IMAGE_GRAPH_AXIS_X, IMAGE_GRAPH_AXIS_Y und IMAGE_GRAPH_AXIS_Y_SECONDARY definiert, mit denen Sie die X-, die Y- und eine eventuell vorhandene zweite Y-Achse ansprechen können.
Um den Wertebereich auf einer Achse zu definieren, können Sie die Methoden forceMinimum() und forceMaximum() nutzen. Mit den folgenden Zeilen würde die Skalierung der Y-Achse nicht mehr vollautomatisch erfolgen. Sie beginnt bei 5000 und endet bei 30000, wobei die Aufteilung linear ist.
$y_achse=$plotarea->getAxis(IMAGE_GRAPH_AXIS_Y); $y_achse->forceMinimum (5000); $y_achse->forceMaximum (30000);
Das Ende der Achse ist normalerweise nicht mit einem Pfeil versehen. Wenn Sie das wünschen, können Sie diese Darstellung mit showArrow() einschalten. Möchten Sie den Pfeil wieder verstecken, erledigt hideArrow() das für Sie.
Am Anfang und Ende der Y-Achse werden normalerweise keine Werte ausgegeben. Das können Sie mit der Methode showLabel() ändern. Diese akzeptiert bestimmte Konstanten, mit denen Sie am Anfang und Ende der Achse die Werte ausgeben lassen können. Übergeben Sie ihr die Konstante IMAGE_GRAPH_LABEL_MINIMUM, wird der kleinste Wert der Achse eingeblendet. Mit IMAGE_GRAPH_LABEL_MAXIMUM erscheint der größte Wert, und IMAGE_GRAPH_LABEL_ZERO gibt die Null an der Nullstelle der Achse aus.
Die Schrittweite, die für die Beschriftung der Achse genutzt wird, bestimmt das System normalerweise selbst. Um eine eigene Schrittweite zu definieren, können Sie setLabelInterval() nutzen. Die Methode bekommt die gewünschte Schrittweite als ganzzahligen Wert übergeben.
Die Methoden setLabelOption() und setLabelOptions() können die Darstellung der Beschriftung beeinflussen. setLabelOption() bekommt den Namen der Option sowie den dazugehörigen Wert übergeben, und setLabelOptions() akzeptiert ein Array, bei dem die Schlüssel die Namen der Optionen sind und die Werte direkt übernommen werden. Die Option 'showtext' kann als Wert entweder true oder false haben und definiert damit, ob die Beschriftung der Achse angezeigt werden soll. Um festzulegen, ob die Beschriftung auf der Außen- oder der Innenseite der Achse ausgegeben wird, können Sie der Option 'position' den String 'inside' bzw. 'outside' übergeben. Zwar können Sie die Option 'font' auch noch nutzen, um die Schriftart zu verändern, aber ich würde eher die Methoden setFont(), setFontColor() und setFontSize() empfehlen, um Schriftart, -farbe und -größe festzulegen.
Um das Aussehen der Achse selbst zu ändern, können Sie mit setLineColor() eine andere Farbe selektieren. Die Länge der Querstriche, die die Einteilung markieren, kann mit setTickOptions() geändert werden. Die Methode erwartet zwei Parameter, die bei einer Y-Achse die X-Koordinate der Linien angeben, die gezeichnet werden sollen. Verändern Sie eine X-Achse, sind natürlich die Y-Koordinaten zu nutzen. setTickOptions(-2,5) würde bedeuten, dass die Querlinien 2 Pixel links von (bzw. unter) der Achse beginnen und 5 Pixel rechts von (bzw. über) der Achse enden.
Ein schönes Feature ist die Methode addMark(), mit der Sie einen Punkt oder einen Abschnitt auf einer Achse markieren können. addMark() akzeptiert ein oder zwei Zahlen als Parameter. [In der Parameterliste der Methode ist ein dritter Parameter namens text vorgesehen, der zurzeit noch nicht genutzt wird. Es ist anzunehmen, dass die Markierung damit in zukünftigen Versionen beschriftet werden kann. ] Übergeben Sie nur eine Zahl, wird die angegebene Stelle mit einem Pfeil markiert. Zwei Parameter führen dazu, dass der Abschnitt, der durch die beiden Werte markiert ist, hervorgehoben wird.
require_once('Image/Graph.php'); $graph = Image_Graph::factory('graph', array(500, 400)); // Schriftart definieren $font=$graph->addNew('ttf_font','COUR.TTF'); $font->setAngle(45); $font->setSize(10); $font->setColor('black'); $plotarea = $graph->addNew('plotarea'); // Y-Achse anpassen $y=$plotarea->getAxis(IMAGE_GRAPH_AXIS_Y); // Maximum und Minimum definieren $y->forceMaximum (20000); $y->forceMinimum (10000); // Markierungen hinzufuegen $y->addMark(14000,12000); $y->addMark(18000); // Schrift festlegen $y->setFont($font); // Weitere Einstellungen $y->showLabel(IMAGE_GRAPH_LABEL_MINIMUM); $y->showArrow(); $y->setTickOptions(-4,10); // X-Achse veraendern $x=$plotarea->getAxis(IMAGE_GRAPH_AXIS_X); $x->showArrow(); // Die X-Achse soll dieselbe Schrift bekommen, // der Drehwinkel soll aber anders sein $font_kopie= clone $font; $font_kopie->setAngle(90); $x->setFont($font_kopie); $daten = Image_Graph::factory('dataset'); $daten->addPoint('Januar', 11000); $daten->addPoint('Februar',12000); $daten->addPoint('März', 13500); $daten->addPoint('April', 15000); $daten->addPoint('Mai', 18000); $daten->addPoint('Juni', 14000); $plot = $plotarea->addNew('line', $daten); // Linie soll gestrichelt dargestellt werden $line = $graph->addNew('Image_Graph_Line_Dashed', array('red', 'transparent')); $plot->setLineStyle($line); $graph->done();
Listing 18.7 Anwendungsbeispiel für die Achsen-Methoden
Wenn Sie ein komplettes Koordinatensystem darstellen und nicht nur einen Quadranten, stellt sich die Frage, wo die Achsen sich schneiden sollen. Normalerweise wird die Y-Achse immer am Anfang der X-Achse ausgegeben. Das kann störend sein, wenn die Y-Achse schon im negativen Zahlenbereich der X-Achse liegt. Mit setAxisIntersection() können Sie definieren, wo die Achsen sich schneiden sollen. Wenn Sie die Methode mit der X-Achse aufrufen und ihr die Zahl Null übergeben, so liegt der Schnittpunkt der beiden Achsen an der Nullstelle der X-Achse.
Abbildung 18.6 Ausgabe im Browser
18.5.6 Gitternetz
In einigen Fällen kann es hilfreich sein, zusätzlich zu den Achsen noch ein Gitternetz ausgeben zu lassen. Auch das ist ohne Probleme möglich. Für diesen Anwendungsfall ist die Klasse Image_Graph_Grid_Lines vorgesehen. Um die Gitternetzlinien hinzuzufügen, müssen Sie die Methode addNew()zweimal aus dem Plotarea-Objekt heraus aufrufen. Die Methode bekommt als ersten Parameter die Konstante 'line_grid' übergeben. Der zweite Parameter ist null, da der Konstruktor der Klasse keine Parameter erwartet. Mit den Konstanten IMAGE_GRAPH_AXIS_X und IMAGE_GRAPH_AXIS_Y werden die Linien schließlich den entsprechenden Achsen zugewiesen.
$X_Linien = $Plotarea->addNew('line_grid', null, IMAGE_GRAPH_AXIS_X); $Y_Linien = $Plotarea->addNew('line_grid', null, IMAGE_GRAPH_AXIS_Y); $line_style = Image_Graph::factory('Image_Graph_Line_Dashed', array('lightgrey','transparent')); $X_Linien->setLineStyle($line_style); $Y_Linien->setLineStyle($line_style);
In diesem Beispiel wird den Linien noch ein Stil für die Darstellung der Linie zugewiesen. Das ist allerdings optional. Falls Sie das nicht tun, werden die Linien durchgehend und grau dargestellt.
Wichtig ist, dass Sie das Gitternetz möglichst frühzeitig ausgeben lassen sollten. Da die einzelnen Darstellungen auf dem Untergrund gestapelt werden, könnte es sonst passieren, dass der eigentliche Graph von den Gitternetz-Linien überlagert wird.
18.5.7 Diagrammtypen
Nachdem Sie nun die Grundlagen der Arbeit mit Image_Graph kennen gelernt haben, möchte ich Ihnen die wichtigsten und populärsten Diagrammtypen vorstellen, die das Paket unterstützt. Die Diagrammtypen Step Chart, Dot Chart, Map Chart, Candlestick Chart, Band Chart und Box & Whisker Chart habe ich nicht erläutert. Eine Vorstellung aller Diagrammtypen finden Sie im Internet unter http://pear.veggerby.dk/samples/.
Line
Bei dem Diagrammtyp Line handelt es sich um ein einfaches Liniendiagramm, wie ich es in den vorhergehenden Beispielen schon genutzt habe. Daher werde ich es hier nicht erneut erläutern.
Area
Bei einer Area handelt es sich um ein Linien-Diagramm, bei dem die Fläche zwischen Linie und Achse mit einer Farbe gefüllt werden kann. Die Füllfarbe muss mithilfe der Methode setFillColor() zugewiesen werden.
Smoothed Line und Smoothed Area
Die Varianten Smoothed Line und Smoothed Area leiten sich von Line und Area ab. Der Unterschied besteht allerdings darin, dass die Ecken in der Darstellung abgerundet werden, so dass eine Kurve entsteht. Für die Nutzung der Smoothed-Varianten ist keine Kurzschreibweise vorgesehen, so dass Sie den kompletten Namen der Klasse angeben müssen.
// Nutzung einer Smoothed Area $plot = $plotarea->addNew('Image_Graph_Plot_Smoothed_Area', $daten); $plot->setFillColor('#AAAAAA'); // Nutzung einer Smoothed Line $plot = $plotarea->addNew('Image_Graph_Plot_Smoothed_Line', $daten);
Abbildung 18.8 Eine Smoothed Area
Bar, Multiple Bar, Impulse Chart
Der Typ Bar bezeichnet Balkendiagramme. Diese können gefüllt dargestellt werden, müssen aber nicht gefüllt werden. Weisen Sie mit setFillColor() eine Füllfarbe zu, so haben alle Balken dieselbe Füllfarbe. Um jedem Balken eine andere Farbe zu geben, müssen Sie ein Image_Graph_Fill_Array-Objekt ableiten, diesem die Farben zuweisen und das Objekt dann an das Zeichen-Objekt übergeben.
Abbildung 18.9 Balken-Diagramm
In einer Multiple Bar-Darstellung werden immer mehrere Balken auf einem Punkt der X-Achse ausgegeben. Die Idee ist, mehrere Werte direkt vergleichbar zu machen.
Um diese Darstellung zu erzeugen, müssen die Daten als sequenzielle Datensätze in einem Array übergeben werden.
require_once('Image/Graph/Dataset/Sequential.php');
$daten[] = new Image_Graph_Dataset_Sequential(array(4,2,3,4));
$daten[] = new Image_Graph_Dataset_Sequential(array(1,3,4,3));
$daten[] = new Image_Graph_Dataset_Sequential(array(2,1,2,1));
$Plot = $Plotarea->addNew('bar', array($daten));Wichtig hierbei ist nicht nur, dass die Datensätze selbst als Array übergeben werden, sondern sie müssen auch als Array an addNew() übergeben werden. Das mag ein wenig verwunderlich sein, hat aber den einfachen Grund, dass Varianten der Darstellung wie Stacked Bar hier noch einen zweiten Wert erfordern.
Eine Sonderform der Balkendiagramme ist das Impuls-Diagramm. In diesem Fall werden die Balken durch eine einfache Linie dargestellt. Das Impuls-Diagramm wird wie ein normales Balkendiagramm initialisiert, wobei Sie dem addNew() nicht 'bar' übergeben:
Stacked Area, Stacked Bar, Stacked Bar 100 %
Die Stacked-Varianten dieser Darstellungsformen führen zu einer »gestapelten« Darstellung. Bei einem Balkendiagramm heißt das, dass ein Balken beispielsweise nicht mehr aus einem Wert besteht, sondern in drei Wertebereiche aufgeteilt ist. Für jeden der Wertebereiche muss mithilfe eines Image_Graph_Dataset_Sequential-Objekts dieselbe Anzahl von Werten zugewiesen werden.
Für diese Darstellungsformen wird der Factory-Methode jeweils 'area' bzw. 'bar' übergeben. Die Datensätze werden allerdings in einem Array übergeben, bei dem der zweite Wert einer der Strings 'stacked' oder 'stacked100pct' ist. 'stacked' kann sowohl bei Areas als auch bei Bars angewandt werden. 'stacked100pct' ist nur im Zusammenhang mit einer Balkendarstellung zulässig und führt zu einer Darstellung, in der alle Balken gleich hoch sind. Die übergebenen Werte werden hierbei als Anteil von 100 % interpretiert.
// Datensaetze generieren require_once('Image/Graph/Dataset/Sequential.php'); $Datasets[] = new Image_Graph_Dataset_Sequential( array(4,2,3,1,2)); $Datasets[] = new Image_Graph_Dataset_Sequential( array(1,3,4,1,7)); $Datasets[] = new Image_Graph_Dataset_Sequential( array(2,1,2,4,1)); // Stacked Bar hinzufuegen $Plot = $Plotarea->addNew('bar',array($Datasets, 'stacked')); // Fuellfarben zuweisen $FillArray = Image_Graph::factory('Image_Graph_Fill_Array'); $FillArray->addColor('blue@0.5'); $FillArray->addColor('yellow@0.5'); $FillArray->addColor('green@0.5'); $Plot->setFillStyle($FillArray); $Graph->done();
Abbildung 18.10 Stacked Bar-Darstellung
Pie
Bei dem Typ Pie handelt es sich um ein zweidimensionales Tortendiagramm. Eine dreidimensionale Darstellung ist zurzeit nicht vorgesehen.
Die einzelnen Teile des Diagramms werden standardmäßig nicht auseinander gezogen. Möchten Sie, dass die Teile separiert dargestellt werden, hilft Ihnen die Methode explode(). Übergeben Sie ihr nur einen Parameter, so bezeichnet dieser den Abstand, den alle Teile vom Mittelpunkt des Kreises haben sollen. Mithilfe eines zweiten Parameters können Sie ein Tortenstück explizit ansprechen, auf das sich die Verschiebung beziehen soll.
// Initialisierung der Plotarea und Verstecken der Achsen $daten= Image_Graph::factory('dataset'); // Daten fuer die Ausgabe $daten->addPoint('Januar', 300); $daten->addPoint('Februar',500); $daten->addPoint('März', 100); $Plot = $Plotarea->addNew('pie', $daten); // Der Januar soll um 30 Pixel "herausgezogen" werden. // Ohne 'Januar' haetten alle einen Abstand von 30Px $Plot->explode(30,'Januar'); // Farben hinzufuegen $fill = Image_Graph::factory('Image_Graph_Fill_Array'); $fill->addColor('green@0.5'); $fill->addColor('blue@0.5'); $fill->addColor('red@0.5'); $Plot->setFillStyle($fill); $Graph->done();
Abbildung 18.11 Tortendiagramm im Browser
Radar Chart
Ein Radar Chart wird im Deutschen auch als Netzdiagramm bezeichnet. Es verfügt über eine Achse für jeden Wert. Die Achsen treffen sich in einem Mittelpunkt und laufen dann sternförmig auseinander. Die einzelnen Werte können mit addPoint() an ein normales Dataset übergeben werden. Auch hier ist keine Kurzform für den Namen der Klasse definiert.
In Abbildung 18.12 wurde das Diagramm mit einem 20 %igen Blau gefüllt, um die Lesbarkeit zu verbessern.
Darstellung von mathematischen Funktionen
Alle bisher vorgestellten Diagramme geben Ihnen die Möglichkeit, bekannte Daten grafisch darzustellen. Allerdings können Sie auch mathematische Funktionen grafisch darstellen. Hierzu müssen Sie zwei Funktionen erstellen, die einen Wert als Parameter akzeptieren. Der Rückgabewert der Funktionen definiert dann die Position des Punktes im Koordinatensystem. Mit dieser Technik ist es also auch möglich, Graphen darzustellen, die von zwei Funktionen abhängen. Möchten Sie einfache Funktionen wie Sinus oder Kosinus darstellen, definieren Sie die Funktion zur Berechnung der X-Koordinate so, dass sie den Wert, den sie als Parameter bekommt, direkt zurückgibt.
Diese beiden Funktionen werden zur Berechnung der Koordinaten genutzt. Sobald diese vorliegen, können Sie ein Smoothed Line-Diagramm auf Basis der ermittelten Daten erzeugen lassen.
Der folgende Code ist ein Beispiel, um eine Sinus-Kurve zu zeichnen:
require_once('Image/Graph.php'); $Graph = Image_Graph::factory('graph', array(400, 300)); $Font = $Graph->addNew('ttf_font', 'COUR.TTF'); $Font->setSize(8); $Graph->setFont($Font); $Plotarea=$Graph->addNew('plotarea','axis'); $Y_Achse = $Plotarea->getAxis(IMAGE_GRAPH_AXIS_Y); $ Y_Achse ->setAxisIntersection(0); $X_Linien = $Plotarea->addNew('line_grid', null, IMAGE_GRAPH_AXIS_X); $Y_Linien = $Plotarea->addNew('line_grid', null, IMAGE_GRAPH_AXIS_Y); $line_style = Image_Graph::factory('Image_Graph_Line_Dashed', array('lightgrey','transparent')); $X_Linien->setLineStyle($line_style); $Y_Linien->setLineStyle($line_style); // Funktion fuer die X-Koordinate function x_koord ($p) { return $p; } // Funktion fuer die Y-Koordinate function y_koord($p) { return sin($p); } // Daten berechnen lassen $daten = Image_Graph::factory('vector', array(-2*pi(), 2*pi(), // von –2*pi bis 2*pi 'x_koord', 'y_koord', // Namen der Funktionen 50)); // Aufloesung // Kurve zeichnen $Plot = $Plotarea->addNew('Image_Graph_Plot_Smoothed_Line',_$ret_ $daten); $Graph->done();
Listing 18.8 Ausgabe der Sinus-Funktion
Übergeben Sie der Factory-Methode 'vector', benötigt sie ein Array mit Informationen, die zur Berechnung der Daten herangezogen werden. Zum Ersten sind das der maximale und der minimale Wert, der an die Funktionen übergeben werden soll. Danach folgen die Namen der beiden Funktionen, worauf sich die Auflösung anschließt. Die Auflösung definiert, wie viele einzelne Punkte zwischen Minimum und Maximum zur Berechnung herangezogen werden sollen. Je größer die Zahl ist, die Sie hier angeben, desto genauer ist also die grafische Darstellung, aber desto größer ist auch der Rechenaufwand.
Zugegebenermaßen ist das nur ein kleiner Überblick über die Leistungsfähigkeit von Image_Graph. So können Sie beispielsweise auch Bilder in den Hintergrund legen, verschiedene Graphen in einer Darstellung kombinieren und Ähnliches. Das ganze Paket zu beschreiben würde nur leider den Rahmen dieses Buches sprengen. Da das Paket noch in einem frühen Entwicklungsstadium ist, prüfen Sie bitte das Changelog daraufhin, welche Änderungen sich mit den letzten Updates ergeben haben.
