16.3 Weitere Möglichkeiten

Die Graph-Komponente ist zu umfangreich, um das gesamte Potential der Komponente sowie ihre Erweiterungsmöglichkeiten in diesem Kapitel aufzuzeigen. Eine gute Quelle für die vollständige Dokumentation ist das Tutorial. Ein paar der wesentlichen Anwendungsmöglichkeiten sollen allerdings noch aufgezeigt werden.

16.3.1 Generierung von Bitmaps

Wenn es Ihnen nicht möglich ist, SVG zu verwenden, sollten sie häufig Bitmaps mit Hilfe der GD-Extension generieren. Wie in Abschnitt 16.1.1, »Ausgabeformate«, schon angesprochen, ist die Qualität der mit GD generierten Bilder erheblich geringer, weil die Extension einige Features nicht unterstützt und an anderen Stellen, wie dem Zeichnen von halbtransparenten Ellipsenausschnitten, Darstellungsfehler verursacht.

Eine Lösung dafür ist die Verwendung externer Programme zur Konvertierung von SVG in ein Bitmap – zum Beispiel das PNG-Format, das für solche Diagramme optimal ist. Dazu ist allerdings ein Zugriff auf die Kommandozeile aus PHP heraus notwendig. Besonders eignet sich dafür das Programm rsvg aus librsvg sowie inkscape, ein fortgeschrittenes Programmm zur Bearbeitung von Verktorgrafiken. Die Konvertierung ist im Tutorial genauer beschrieben. [http://ezcomponents.org/docs/api/latest/introduction_Graph.html#svg-to-bitmap-conversion ] Selbstverständlich ist es auch möglich, den GD-Treiber direkt zu verwenden. Mit dem angesprochenen Supersampling sind die Resultate immerhin ansehnlicher als die der meisten anderen Graphenbibliotheken, die man für PHP kennt.

$graph = new ezcGraphPieChart();
$graph->title = 'Access statistics';

$graph->driver = new ezcGraphGdDriver();
$graph->options->font = 'tutorial_font.ttf';

$graph->data['Access statistics'] =
    new ezcGraphArrayDataSet( array(
        'Mozilla' => 19113,
        'Explorer' => 10917,
        'Opera' => 1464,
        'Safari' => 652,
    )
);

$graph->render( 400, 200, 'example_gd.png' );

Listing 16.16 Einen Bitmap-Graph rendern

Um den GD-Treiber ezcGraphGdDriver zu verwenden, muss dieser der Eigenschaft $driver des Graph-Objekts zugewiesen werden. Anders als beim Zuweisen eines neuen Renderers oder neuer Datensätze reicht dies allerdings noch nicht aus, um einen anderen Ausgabetreiber zu verwenden. Zusätzlich muss noch eine zum Treiber passende Schriftart zugewiesen werden. Der GD-Treiber kann je nach Konfiguration True-Type-Fonts und Post-Script-Fonts Type 1 verarbeiten. Erstere werden mit der FreeType2-Bibliothek auch antialiased in guter Qualität gerendert.

Abbildung 16.7 Verwendung des GD-Treibers zur Erzeugung des Diagramms

Ein klarer Vorteil des GD-Treibers ist die genaue Berechnung der Schriftgröße und damit eine absolut exakte Positionierung der Texte innerhalb der Graphik.

In dem Beispiel können Sie neben der Verwendung des GD-Treibers noch das bislang nicht gezeigte ezcGraphArrayDataSet sehen. Mit diesem Datensatz lassen sich PHP-Arrays direkt in einen Graphen einfügen.

Bis jetzt haben wir drei der aktuell vier verschiedenen verfügbaren Datensätze vorgestellt. Neben diesen gibt es noch die Möglichkeit, dem ezcGraphNumericDataSet ein Callback zu einer selbst definierten Funktion oder Methode zu übergeben, um mathematische Funktionen abzubilden. Dabei ist die Abtastrate zum Zeichnen des Graphen selbst konfigurierbar, da nicht alle Treiber freie Pfade unterstützen und somit eine Umwandlung von Funktionen zu Kurven nicht effizient einsetzbar wäre.

16.3.2 Balkendiagramme

Balkendiagramme und Netzdiagramme sind von ihren Eigenschaften und ihren darstellbaren Datensätzen gleichwertig mit Liniendiagrammen.

$graph = new ezcGraphBarChart();
$graph->palette = new gpBlogPalette();
$graph->title = 'Used browsers';

$graph->legend->position = ezcGraph::BOTTOM;

Listing 16.17 Positionieren von Graph-Elementen

Wie zuvor erwähnt, wird der Typ des Diagramms durch die Wahl des Konstruktors beeinflusst. Mit der Wahl der Klasse ezcGraphBarChart wird ein Balkendiagramm erstellt, das von dem Liniendiagramm ableitet und sich nur in zwei Eigenschaften von diesem unterscheidet, sodass alle Optionen und Einstellungen äquivalent verwendet werden können.

Wie Sie in der Ausgabe erkennen, wird die Beschriftung der X-Achse anders gerendert, worauf später noch eingegangen wird. Ansonsten hat sich die Standarddarstellung für Datensätze von Linie auf Block geändert. Sie können über die Eigenschaft $displayType eines Datensatzes diese Darstellung wieder zurück auf ezcGraph::LINE setzen und damit Linien und Balken in einem Diagramm kombinieren. Ebenso ist es genauso möglich, die Angabe $displayType einzelner Datensätze in einem Liniendiagramm auf ezcGraph::BAR zu setzen.

Graph-Elemente wie Legende und Titel können im Graphen frei positioniert werden. Die Legende kann, wie sie im Beispiel sehen, an jeder der vier Seiten positioniert werden, während der Titel zu oberst oder auch im Diagrammfuß dargestellt werden kann.

$graph->data['Access statistics'] =
    new ezcGraphArrayDataSet( array(
        'Mozilla' => 19113,
        'Explorer' => 10917,
        'Opera' => 1464,
        'Safari' => 652,
    )
);

$graph->data['Access statistics']->symbol = ezcGraph::NO_SYMBOL;
$graph->data['Access statistics']->highlight['Opera'] = true;

Listing 16.18 Datensätze im Balkendiagramm

In einem dreidimensionalen Balkendiagramm definiert das Symbol des Datensatzes die Grundform des Balkens: ezcGraph::BULLET zeichnet somit eine Säule, während ezcGraph::NO_SYMBOL die Daten mittels eines normalen Balkens darstellt. Eine Übersicht über alle momentan möglichen Symbole:

Sie erinnern sich, dass sich einzelne Daten über die Eigenschaft $highlight hervorheben lassen, was bei einem Tortendiagramm zum Herausrücken eines Tortenstücks führt. Bei Balken- und Liniendiagrammen wird im Fall der Hervorhebung der Datenpunkt mit seinem Wert beschriftet.

$graph->renderer = new ezcGraphRenderer3d();

$graph->renderer->options->legendSymbolGleam = .5;
$graph->renderer->options->barChartGleam = .5;

$graph->render( 500, 200, 'bar_example.svg' );

Listing 16.19 Balkendiagramm rendern

Auch für Balkendiagramme und Legenden gibt es Optionen im Renderer, um das Erscheinungsbild zu verbessern, indem Glanzeffekte hinzugefügt werden. Eine vollständige Liste der Effekte und Modifikationsmöglichkeiten findet sich in der API-Dokumentation. [http://ezcomponents.org/docs/api/latest/Graph/ezcGraphRendererOptions.html ]

Abbildung 16.8 Dreidimensionales Balkendiagramm

Die Beschriftung der X-Achse ist typisch für Balkendiagramme und unterscheidet sich maßgeblich von der Variante, die zuvor beim Liniendiagramm zu beobachten war. Je nach Diagrammtyp wird ein sinnvoller Algorithmus für die Beschriftungen gewählt, die in den von ezcGraphAxisLabelRenderer ableitenden Klassen implementiert sind. Diesen Algorithmus können Sie auch selbst bestimmen, indem Sie ihn manuell setzen.

$chart->xAxis->axisLabelRenderer =
    new ezcGraphAxisRotatedLabelRenderer();
$chart->xAxis->axisLabelRenderer->angle = 45;

Listing 16.20 Algorithmus für die Achsenbeschriftung konfigurieren

Die Graph-Komponente stellt dazu verschiedene Algorithmen zur Verfügung:

• ezcGraphAxisExactLabelRenderer Dieser Algorithmus wurde bei den numerischen Achsen in den gezeigten Bildern verwendet und stellt sicher, dass alle Schritte auf der Achse mit einem Text versehen sind. Dazu wird beim letzten Schritt auf der Achse der Text unterhalb des Schritte platziert. Dies mag unschön erscheinen, stellt aber sicher, dass kein Text durch andere Elemente im Graphen verdeckt ist.

• ezcGraphAxisCenteredLabelRenderer Dieser im Liniendiagramm auf der Y-Achse verwendete Algorithmus platziert den Text zentriert am markierten Schritt auf der Achse. Da sich der Text an der Null-Position mit der anderen Achse schneiden würde, und dadurch schlecht lesbar wäre, wird er dort nicht gezeichnet. Dieses Verhalten ist über die Eigenschaft $showZeroValue konfigurierbar.

• ezcGraphAxisRotatedLabelRenderer Ein nützlicher Algorithmus, wenn viele Texte an einer Achse angezeigt werden sollen, da durch die freie Rotation mehr Texte auf der Achse Platz finden. Die Texte werden dabei vertikal zentriert an den Schritten der Achse ausgerichtet.

• ezcGraphAxisBoxedLabelRenderer Dieser Algorithmus zeichnet die Texte zwischen zwei Schritten auf der Achse, was optimal für Balkendiagramme ist. Im letzten Beispiel zu einem Balkendiagramm war dies zu sehen.

• ezcGraphAxisRadarLabelRenderer Da der Algorithmus zum Zeichnen der Achsenbeschriftungen auch das Zeichnen des Gitters im Diagrammhintergrund übernehmen muss, existiert ein spezieller Algorithmus für Netzdiagramme, der ein rotiertes Gitter zeichnet.

Jeder der Algorithmen ist mit allen Achsen und Diagrammtypen verwendbar, doch kann eine unpassende Kombination in Einzelfällen zu optisch nicht ansprechenden Resultaten führen.

Ihr Kommentar