Vorlage:Graph:Chart

Diese Vorlage dient zur Darstellung von Diagrammen mittels der Graph-Erweiterung.

Für die Einbindung der Diagramme in Artikel kann Vorlage:Manueller Rahmen verwendet werden, mit welcher ein analoges Aussehen zu eingebundenen Bildern erreicht wird.

Für die Darstellung von Balkendiagrammen können die Vorlage:Balkendiagramm sowie die dort verlinkten Vorlagen verwendet werden.

Parameter

width: Breite des Diagramms
height: Höhe des Diagramms
type: Diagrammtyp: line für Liniendiagramme, area für Flächendiagramme, rect für Säulendiagramme und pie für Kreisdiagramme (Tortendiagramme). Mit dem Präfix stacked (z. B. stackedarea) können mehrere Serien gestapelt werden.
interpolate: Interpolations-Methode für Linien- und Flächendiagramme. Empfohlen ist monotone – weitere Werte lassen sich https://github.com/vega/vega/wiki/Marks#area entnehmen.
colors: Farbpalette des Diagramms als kommagetrennte Liste von Farbwerten. Farbwerte werden im Format #rgb/#rrggbb/#aarrggbb oder mit einem CSS-Farbnamen angegeben. Bei #aarrggbb bezeichnet aa den Alphakanal, d. h. FF=100% Deckkraft, 80=50% Deckkraft/halbdurchsichtig, usw. (Die Standardpalette ist category10.)
xAxisTitle und yAxisTitle: Beschriftung der X- und Y-Achse
xAxisMin, xAxisMax, yAxisMin und yAxisMax: ändert den Start- und Endwert der X- bzw. Y-Achse
xAxisFormat und yAxisFormat: ändert die Formatierungen der Achsenbezeichnungen. Um beispielsweise Prozentzahlen auszugeben, kann das Format % genutzt werden, während ,d Tausendertrennzeichen einschaltet (https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers für Zahlen und https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md für Zeitangaben).
xAxisAngle: Dreht die x-Achsenbezeichnungen um den angegebenen Winkel. Sinnvolle Werte sind: -45, +45, -90, +90
xGrid und yGrid: Anzeige von Gitternetzlinien ja/nein
xScaleType und yScaleType: Ändert die Skalierung der betreffenden Achse. Wenn der Parameter auf log gesetzt wird, erscheint die Achse mit logarithmischer Skalierung. Man sollte den Startwert dieser Achse dann nicht auf 0 setzen. (Weitere erlaubte Werte sind unter https://vega.github.io/vega/docs/scales/#types aufgeführt, diese wurden jedoch noch nicht getestet.)
xType und yType: Datentypen der Werte, z. B. integer für Ganzzahlen, number für reelle Zahlen, date für Datumsangaben (z. B. im Format JJJJ/MM/TT) und string für beliebige Ordinalwerte.
x: X-Werte als kommagetrennte Liste (wenn ein x-Wert selbst ein Komma enthält, muss dieses mit einem Backslash escapet werden, d. h. es muss stattdessen \, verwendet werden)
y bzw. y1, y2, …: Y-Werte von einer bzw. mehreren Datenreihen. Bei Kreisdiagrammen gibt y2 die Radien der entsprechenden Kreisstücke an.
legend: Legende mit angegebenen Legendentitel anzeigen (funktioniert nur bei mehreren Datenreihen). Für Alternativen siehe Wikipedia:Farbe#Vorlagen.
y1Title, y2Title, …: Bezeichnung der jeweiligen Datenreihe in der Legende
linewidth: Liniendicke bei Liniendiagrammen bzw. Abstand zwischen den Kreisstücken bei Kreisdiagrammen; bei mehreren Datenreihen können durch Komma separiert mehrere verschiedene Werte angegeben werden, z. B. linewidth=1, 2.3, 6. Wird der Wert für eine Datenreihe auf 0 gesetzt, können mit showSymbols die reinen Datenpunkte angezeigt werden.
Darstellung der Datenpunkte:
- showSymbols: Fügt Symbole zur Datenpunkt-Markierung ein. Wenn eine Zahl angegeben wird, wird sie als Skalierungsfaktor interpretiert, wobei 2,5 der Default-Wert ist. Wie bei linewidth können unterschiedliche werte für die Datenreihen angegeben werden. Beispiel: showSymbols=1, 2, 3, 4.
- symbolsShape: Symbol der Datenpunkt-Markierung. Mögliche Werte sind unter anderem: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left, banana. Wie bei linewidth können unterschiedliche Werte für die Datenreihen angegeben werden. Beispiel: symbolsShape=circle, cross, square
- symbolsNoFill: wenn der Parameter gesetzt wird, wird das Symbol der Datenpunkt-Markierung nicht ausgefüllt, sondern nur der Rand des Symbols angezeigt.
- symbolsStroke: Wenn symbolsShape=x oder die Option symbolsNoFill= gesetzt ist, kann mit diesem Parameter die Randdicke des Symbols gesetzt werden, Default-Wert: 2.5.
showValues: gibt die Y-Werte zusätzlich als Text aus. (Wird momentan nur von (nicht gestapelten) Säulen- und Kreisdiagrammen unterstützt.) Die Ausgabe kann über folgende Parameter konfiguriert werden, die angegeben werden als Name1:Wert1, Name2:Wert2:
- format: formatiert die Werteausgabe gemäß https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers für Zahlen und https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md für Zeitangaben
- fontcolor: Textfarbe
- fontsize: Textgröße
- offset: verschiebt den Text gemäß dem angegebenen Offset. Bei Säulen- und Kreisdiagrammen (mit midangle-Winkelwert) gibt dies auch an, ob der Text inner- oder außerhalb der Diagrammgrafiken geschrieben wird.
- angle (nur Kreisdiagramme): Winkel in Grad oder midangle (Standard) für dynamischen Winkel basierend auf dem Winkel des Kreisstücks.
innerRadius: innerer Radius, um aus einem Kreisdiagramm ein Ringdiagramm zu erzeugen.
Annotations
- vAnnotationsLine and hAnnotationsLine: display vertical or horizontal annotation lines on specific values e.g. hAnnotationsLine=4, 5, 6
- vAnnotationsLabel and hAnnotationsLabel: display vertical or horizontal annotation labels for lines e.g. hAnnotationLabel = label1, label2, label3

Hinweis: In der Vorschau erzeugt die Graph-Funktion ein Canvas-Element mit einer Vektorgrafik. Beim Abspeichern wird daraus jedoch eine PNG-Datei erzeugt.

Für Entwickler: Neue Funktionen können im Vega Editor ausprobiert werden, der auch eine Vielzahl von Beispielcodes enthält.

Der nachstehende Abschnitt wird automatisch in jede Dokumentation zur Vorlagenprogrammierung eingebunden.

Beispiele

Liniendiagramm

Liniendiagramm:

{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,8,9,10|y=10, 12, 6, 14, 2, 10, 7, 9|yAxisMin=0}}