Colani: 1 versie geïmporteerd

2023-03-07T08:23:58Z

1 versie geïmporteerd

Nieuwe pagina

<includeonly><templatestyles src="Graph:Chart/styles.css" />{{#tag:graph|{{#invoke:Graph|chartWrapper}}}}</includeonly><noinclude>
{{Sjabdoc|1=
{{Gebruikt Lua|Graph}}
{{Gebruikt TemplateStyles}}

Voor het plotten van grafieken.

== Parameters ==
{{Module:Graph/doc|chart}}

== Voorbeelden ==
===Enkele datareeks===
====Lijndiagram====
<pre>
{{Graph:Chart
| width = 450
| height = 150
| type = line
| x = 1,2,3,4,5,6,7,8,9
| y = 10,12,6,14,2,10,7,9,12
}}
</pre>
De y-as begint met de kleinste y-waarde, maar deze kan worden overschreven met de parameter <code>yAxisMin</code>.
{{Graph:Chart
| width = 400
| height = 150
| type = line
| x = 1,2,3,4,5,6,7,8,9
| y = 10,12,6,14,2,10,7,9,12
}}

====Spreidingsdiagram====
Een [[spreidingsdiagram]] is te maken door bij een lijndiagram de lijnen weg te laten maar wel symbolen op data punten te tonen: <code>linewidth=0</code> en [[Module:Graph/doc#showSymbols|<code>showSymbols=</code>]].
<pre>
{{Graph:Chart
|width=500
|height=200
|type=line
|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
|showSymbols=
|linewidth=0
|yGrid= |xGrid=
}}
</pre>
{{Graph:Chart
|width=500
|height=200
|type=line
|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
|showSymbols=
|linewidth=0
|yGrid= |xGrid=
}}

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

Opmerking: De y-as begint bij nul.

Zwevende veelhoek of polygoon
<pre>
{{Graph:Chart
| width=400
| height=100
| type=area
| x=10,20,30,10
| y=200,100,300,200
}}
</pre>
{{Graph:Chart
| width=400
| height=100
| type=area
| x=10,20,30,10
| y=200,100,300,200
}}

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

====Taartdiagram====
<pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
}}
</pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
}}

<pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
| showValues=
}}
</pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
| showValues=
}}

====Donutdiagram====
<pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| innerRadius=40
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
}}
</pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| innerRadius=40
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
}}
===Meerdere datareeksen===
====Lijndiagram met meer dan één datareeks, met kleuren====
<pre>
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| colors=#0000aa,#ff8000
}}
</pre>{{Graph:Chart
| colors=#0000aa,#ff8000
| height=150
| legend=Legenda
| type=line
| width=400
| x=1,2,3,4,5,6,7,8
| xAxisTitle=X
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| yAxisTitle=Y
}}

Met percentages, y-as met min-max van 0-100%
<pre>
{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisMin = 0
| yAxisMax = 1
| yAxisFormat = %
| showSymbols =
| y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
| y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63
| y3 = .27, .311, .31, , .26, .28, .285
| y4 = {{loop|7|, }} .40, .44, .42, .47, .44, .43, .42
}}
</pre>

{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisMin = 0
| yAxisMax = 1
| yAxisFormat = %
| showSymbols =
| y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
| y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63
| y3 = .27, .311, .31, , .26, .28, .285
| y4 = {{loop|7|, }} .40, .44, .42, .47, .44, .43, .42
}}

====Vlakdiagram met meer dan één datareeks, met overlap====
<pre>
{{Graph:Chart
| width=400
| height=100
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=area
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| colors=#800000aa,#80ff8000
}}
</pre>{{Graph:Chart
| width=400
| height=100
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=area
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| colors=#800000aa,#80ff8000
}}

====Staafdiagram met meer dan één datareeks====
<pre>
{{Graph:Chart
| width=400
| height=100
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=rect
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
|colors=#800000aa,#80ff8000
}}
</pre>
{{Graph:Chart
| width=400
| height=100
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=rect
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
|colors=#800000aa,#80ff8000
}}

====Gestapeld Staafdiagram====
<pre>
{{Graph:Chart
| width=400 | height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=stackedrect
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| y1Title=Data A
| y2Title=Data B
| colors=seagreen, orchid
}}
</pre>
{{Graph:Chart
| width=400 | height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=stackedrect
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| y1Title=Data A
| y2Title=Data B
| colors=seagreen, orchid
}}

====Vlakdiagram met geïnterpoleerde gegevenswaarden====
<pre>
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=stackedarea
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| interpolate=monotone
| colors=seagreen, orchid
}}
</pre>
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| type=stackedarea
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
| interpolate=monotone
| colors=seagreen, orchid
}}

====Taartdiagram met twee datareeksen====
<pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
| y2=7,8,9,8,8,9,10,9,5
| showValues=
}}
</pre>
{{Graph:Chart
| width=100
| height=100
| type=pie
| legend=Letter
| x=A,B,C,D,E,F,G,H,I
| y1=100,200,150,300,100,100,150,50,200
| y2=7,8,9,8,8,9,10,9,5
| showValues=
}}

===Legenda===
Een legenda kan worden toegevoegd als er meerdere datareeksen zijn:
<pre>
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| y1Title=Blauw
| y2Title=Oranje
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
}}
</pre>{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legenda
| y1Title=Blauw
| y2Title=Oranje
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
}}

De titel kan worden weggelaten door de parameter leeg te laten:
<pre>
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=
| y1Title=Blauw
| y2Title=Oranje
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
}}
</pre>{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=
| y1Title=Blauw
| y2Title=Oranje
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
}}

Lange legenda's kunnen er onhandig uitzien. Het kan dan beter zijn om de legendaparameter weg te laten en in plaats daarvan {{tl|Legenda}} te gebruiken:
<pre>
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| colors=darkred, gold
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
}}
{{Legenda|darkred|Dit is een lange legendatekst en zou er niet mooi uitzien als het deel zou uitmaken van de grafiek zelf.}}
{{Legenda|gold|Dit is een andere redelijke lange tekst.}}
</pre>{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| colors=darkred, gold
| type=line
| x=1,2,3,4,5,6,7,8
| y1=10,12,6,14,2,10,7,9
| y2=2,4,6,8,13,11,9,2
}}
{{Legenda|darkred|Dit is een lange legendatekst en zou er niet mooi uitzien als het deel zou uitmaken van de grafiek zelf.}}
{{Legenda|gold|Dit is een andere redelijke lange tekst.}}

Deze methode maakt ook het gebruik van wiki-opmaak en het invoegen van links mogelijk. Grafieken die de standaardkleuren gebruiken, moeten de hex-waarden in de legenda-sjablonen specificeren:
{{Kolommen lijst|breedte=7|aantal=5|compact=ja|inhoud=
{{Legenda|#1f77b4|#1f77b4}}
{{Legenda|#ff7f0e|#ff7f0e}}
{{Legenda|#2ca02c|#2ca02c}}
{{Legenda|#d62728|#d62728}}
{{Legenda|#9467bd|#9467bd}}
{{Legenda|#8c564b|#8c564b}}
{{Legenda|#e377c2|#e377c2}}
{{Legenda|#7f7f7f|#7f7f7f}}
{{Legenda|#bcbd22|#bcbd22}}
{{Legenda|#17becf|#17becf}}
}}

Als alternatief kunnen [https://www.w3schools.com/cssref/css_colors.asp CSS-kleurnamen] (of hex-waarden) worden gespecificeerd in de grafiek en de legenda-sjablonen.

===Annotaties===
Lijndiagram met alleen horizontale annotaties:
<pre>
{{Graph:Chart
|hannotatonslabel=label4, label5, label6
|hannotatonsline=4, 5, 6
|linewidths=2,4,0
|showSymbols=3,3,3
|symbolsShape=triangle_up, cross, cross
|type=line
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}
</pre>
{{Graph:Chart
|hAnnotatonsLine=4, 5, 6
|hAnnotatonsLabel=label4, label5, label6
|linewidths=2,4,0
|showSymbols=2,4,3
|symbolsShape=triangle_up, cross, square
|type=line
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}

Vlakdiagram met alleen verticale annotaties:
<pre>
{{Graph:Chart
|vAnnotatonsLine=1, 2, 3
|vAnnotatonsLabel=label1, label2, label3
|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|x=0,1,2,3
|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}</pre>
{{Graph:Chart
|vAnnotatonsLine=1, 2, 3
|vAnnotatonsLabel=label1, label2, label3
|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|x=0,1,2,3
|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}

}}

[[Categorie:Wikipedia:Pagina's met grafieken| ]]
</noinclude>

Sjabloon:Graph:Chart - Bewerkingsoverzicht

Colani: 1 versie geïmporteerd