Vorlage:Graph:Chart

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

Dokumentation

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[Quelltext bearbeiten]

  • 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 verhindert (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 and 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
  • showSymbols: Fügt Symbole zur Datenpunkt-Markierung ein. Im Moment sind nur kreisrunde Punkte möglich. Beispiel: showSymbols=1.
  • 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:
  • innerRadius: innerer Radius, um aus einem Kreisdiagramm ein Ringdiagramm zu erzeugen.

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[Quelltext bearbeiten]

Linien-, Flächen- und Säulendiagramm[Quelltext bearbeiten]

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}}


Anmerkung: Die y-Achse der Liniendiagramme beginnt standardmäßig beim kleinsten Wert, was jedoch durch den Parameter yAxisMin überschrieben werden kann.

Liniendiagramm mit Ordinalskala:
{{Graph:Chart|width=400|height=100|type=line|x=a,b,c,d,e,f,g,h|y=10, 12, 6, 14, 2, 10, 7, 9}}

Liniendiagramm mit Datumswerten (nur englische Ausgabe):
{{Graph:Chart|width=400|height=100|type=line|x=2011/8/1,2011/9/1,2011/10/1,2011/11/1,2011/12/1,2012/1/1,2012/2/1,2012/3/1|y=10, 12, 6, 14, 2, 10, 7, 9|xType=date}}

Flächendiagramm:

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


Anmerkung: Die y-Achse von Flächendiagrammen beginnt standardmäßig bei 0.

Säulendiagramm mit Achsbeschriftungen:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,8,9,10|y=10, 12, 6, 14, 2, 10, 7, 9}}

Säulendiagramm mit Werteausgabe:

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

Säulendiagramm mit Werteausgabe außerhalb der Säulen:

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

Liniendiagramm mit mehreren Datenreihen und eigenem Farbschema:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legende|type=line|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000|yAxisMin=0}}

Flächendiagramm mit mehreren Datenreihen und transparenten Flächen:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legende|type=area|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}

Säulendiagramm mit mehreren Datenreihen:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legende|type=rect|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2}}

Liniendiagramm mit logarithmischer Skalierung der y-Achse:
{{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|yScaleType=log}}

Liniendiagramm mit logarithmischer Skalierung der x-Achse:
{{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|xScaleType=log|yAxisMin=0}}

Liniendiagramm mit doppelt logarithmischer Skalierung:
{{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|xScaleType=log|yScaleType=log}}

Gestapeltes Diagramm[Quelltext bearbeiten]

Gestapeltes Flächendiagramm mit Interpolation:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legende|type=stackedarea|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}

Gestapeltes Säulendiagramm:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legende|type=stackedrect|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|y1Title=Reihe A|y2Title=Reihe B|colors=seagreen, orchid}}

Tortendiagramm[Quelltext bearbeiten]

Tortendiagramm:
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

Tortendiagramm mit Beschriftungen:
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}

Tortendiagramm mit formatierten Beschriftungen:
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=0.135,0.112,0.098,0.106,0.099,0.111,0.117,0.105,0.117|showValues=format:0.1%,fontcolor:black,fontsize:10,offset:5,angle:0}}

Ringdiagramm:
{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

Anmerkung[Quelltext bearbeiten]

Nach dem Abspeichern eines neuen Diagramms kann es passieren, dass das Diagramm nicht angezeigt wird, da der Wikipedia-Diagrammrenderer ein wenig Zeit benötigt. Wenn man die Seite nach wenigen Sekunden neulädt, sollte das Diagramm dann erscheinen.

Siehe auch[Quelltext bearbeiten]

Lua

Verwendetes Modul: Graph #chart

Werkzeuge