Zum Inhalt springen

Vorlage:Graph:Chart

aus Wikipedia, der freien Enzyklopädie

Die Graph-Erweiterung wurde wegen eines Sicherheitsproblems dauerhaft deaktiviert (siehe T334940). In den betroffenen Artikeln werden deshalb Hinweise angezeigt, dass die Grafiken nicht mehr verfügbar sind. Bitte diese nicht entfernen. Aktuell wird mit der Chart-Erweiterung ein Ersatz entwickelt. Näheres dazu siehe Hilfe: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.

  • 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:
  • 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.

Liniendiagramm

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)


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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

Liniendiagramm mit hervorgehobenen Datenpunkten:
{{Graph:Chart|width=400|height=100|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9|yAxisMin=0|showSymbols=2|symbolsNoFill=|symbolsStroke=1}}

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)


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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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|y1Title=Datenreihe 1|y2Title=Datenreihe 2}}

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

Flächendiagramm

[Quelltext bearbeiten]

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)


Anmerkung: Die y-Achse von Flächendiagrammen beginnt standardmäßig bei 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}}

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

Säulendiagramm

[Quelltext bearbeiten]

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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

Die zur Anzeige dieser Grafik verwendete Erweiterung wurde dauerhaft deaktiviert. Wir arbeiten aktuell daran, diese und weitere betroffene Grafiken auf ein neues Format umzustellen. (Mehr dazu)

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.

Lua

Verwendetes Modul: Graph #chart