- 1. Beispiel 1 - Basisbeispiel (mit PieGraph als Standard)
- 1.1. Quellcode Beispiel 1 - Basisbeispiel
- 2. Beispiel 2 - mit LineGraph
- 3. Beispiel 3 - mit MultiLineGraph
- 4. Beispiel 4 - andere Charttypen, andere Anordnung
- 5. Beispiel 5
- 6. Beispiel 6
Der Grafiktyp ArrayGraph ist eigentlich keine neue Grafikform sondern ermöglicht es mehrere Grafiken bereits bekannter Charttypen in einer Grafik zusammenzufassen. Dabei können unterschiedliche Charttypen innerhalb einer Grafik angezeigt werden.
Beispiel 1 - Basisbeispiel (mit PieGraph als Standard)
Eine einfach Form sieht so aus:
Man kann zunächst Folgendes feststellen:
- Wenn nichts anderes festgelegt verwendet ArrayGraph für die einzelnen Charts den Typ PieChart
- Die Anordnung der einzelnen Charts wird durch das Verhältnis von Höhe und Breite bestimmt.
Quellcode Beispiel 1 - Basisbeispiel
<?php
// pie graphs in ArrayGraph
require '../../svggraph/autoloader.php';
$settings = [
//'array_graph_columns' => 2, nicht immer sinnvoll, besser automatisch
'array_graph_options' => [
['graph_title' => "Deutschland"],
['graph_title' => "Spanien"],
['graph_title' => "Frankreich"],
['graph_title' => "Italien"],
],
// Diese Variante Funktioniert nicht
// 'array_graph_options' => [
// 'graph_title' => ["Title 4", "Title 3", "Title 2", "Title 1"],
// ],
'array_graph_type' => ['','','','''],
'auto_fit' => true,
'back_colour' => '#eee',
'back_stroke_width' => 0,
'back_stroke_colour' => '#eee',
'stroke_colour' => '#000',
'axis_colour' => '#111',
'axis_overlap' => 2,
'grid_colour' => '#999',
'label_colour' => '#000',
'axis_font' => 'Arial',
'axis_font_size' => 10,
'graph_title' => "Anteile nach Ländern",
'pad_right' => 5,
'pad_left' => 5,
'show_labels' => true,
'show_label_amount' => true,
'show_label_percent' => true,
'show_subdivisions' => true,
'show_tooltips' => false,
'structured_data' => true,
'structure' => ['key' => 0, 'value' => [1, 2, 3, 4] ],
'start_angle' => 90,
'sort' => false,
//'depth' => 15,
'data_label_back_colour' => 'rgba(240,240,240,0.75)',
];
// Das Verhältnis w/h nestimmt auch die Anordnung der Grafiken
$width = 600;
$height = 500;
$type = 'ArrayGraph';
$values = [
['Autos', 30, 50, 40, 20],
['Busse', 50, 3, 55, 40],
['Fahrräder', 40, 60, 45, 30],
['Flugzeuge', 25, 15, 40, 22],
['Schiffe', 45, 25, 50, 35],
['Bahnen', 35, 25, 39, 31],
['Fußgänger', 20, 45, 3, 28],
];
$colours = [ 'red','yellow', 'blue','white','green', 'orange', 'black' ];
$graph = new Goat1000\SVGGraph\SVGGraph($width, $height, $settings);
$graph->colours($colours);
// $graph->colourRangeHexHSL(1, '#f03', '#999966');
// $graph->colourRangeHexHSL(2, '#f30', '#306630');
// $graph->colourRangeHexHSL(3, '#f3f', '#006600');
$graph->values($values);
$graph->render($type);
?>
Beispiel 2 - mit LineGraph
Man kann mit dem gleichen Code auch vier Liniencharts anzeigen lassen:
Dazu muss nur
'array_graph_type' => ['','','','''],
in
'array_graph_type' => ['LineGraph','LineGraph','LineGraph','LineGraph'],
geändert werden.
Beispiel 3 - mit MultiLineGraph
Wenn man an Stelle von LineGraph den andere Liniencharttypen, also MultiLineGraphoder StackedLineGraph verwendet sehen die Farben bei identischem Code anders aus:
Beispiel 4 - andere Charttypen, andere Anordnung
Durch die Anpassung der Zeilen
'array_graph_type' => ['RadarGraph','Pie3DGraph','PolarArea3DGraph','DonutGraph'],
$width = 600;
$height = 300;
wird das Aussehen deutlich verändert. In der hier vorgestellten Form ist das Ganze aber wenig übersichtlich.