Ŝablono:Graph:Chart/dokumentado
Ĉi tiu ŝablono servas al la surekranigo de diagramoj per la Graph-etendilo.
Parametroj
[redakti fonton]- width: Larĝo de diagramo
- height: Alto de diagramo
- type: Diagramtipo:
line
por liniodiagramoj,area
por areodiagramoj,rect
por kolumnodiagramoj kajpie
por cirklodiagramoj (tortodiagramoj). Per la prefiksostacked
(ekz.stackedarea
) pluraj serioj povas esti stakigataj. - interpolate: Interpolacia metodo por liniaj kaj areaj diagramoj. Rekomendata estas
monotone
– pliaj valoroj povas esti trovataj sur https://github.com/vega/vega/wiki/Marks#area. - colors: Kolorpaleto de la diagramo kiel per komoj apartigita listo de kolorvaloroj. Kolorvaloroj estas donataj en la formato
#rgb
/#rrggbb
/#aarrggbb
aŭ per CSS-kolornomoj. Ĉe#aarrggbb
aa
nomas la alfakanalon, t.e. FF=100% Deckkraft, 80=50% Deckkraft/duone travidebla, ktp. (La norma paleto estascategory10
). - xAxisTitle kaj yAxisTitle: Priskribo de la X- kaj Y-aksoj
- xAxisMin, xAxisMax, yAxisMin kaj yAxisMax: Ŝanĝas la startan kaj finan valorojn de la X- resp. Y-akso
- xAxisFormat kaj yAxisFormat: Ŝanĝas la formatigon de la aksaj nomigoj. Eblaj valoroj troveblas sur //github.com/mbostock/d3/wiki/Formatting und //github.com/mbostock/d3/wiki/Time-Formatting. Por eldoni ekzemple procentajn numerojn, la formato
%
povas esti uzata. - xType kaj yType: Datumtipoj de la valoroj, ekz.
integer
por Ganzzahlen,number
por reelaj numeroj,date
por kalendaraj datoj (ekz. en la formatoJJJJ/MM/TT
) kajstring
por ajnaj ordinalaj valoroj. - x: X-valoroj kiel per komoj apartigita listo
- y resp. y1, y2, …: Y-valoroj de unu resp. pluraj datumaj serioj. Ĉe cirklaj diagramoj
y2
difinas la radiusojn de la koncernaj cirklaj partoj. - legend: Montru priskribon (funkcias nur ĉe pluraj datumaj serioj)
- y1Title, y2Title, …: Nomigo de la ĉiuopa datuma serio en la priskribo
- linewidth: Linia dikeco ĉe liniaj diagramoj resp. distanco inter la cirklaj partoj ĉe cirklaj diagramoj
- showValues: Eldonas la Y-valorojn aldone kiel tekston. (Nuntempe estas subtenata nur de (ne stakigataj) kolumnaj kaj cirklaj diagramoj.) La eldono povas esti konfigurata per la sekvaj parametroj, kiuj estas donataj kiel
Nomo1:Valoro1, Nomo2:Valoro2
:- format: Formatas la eldonon de valoroj laŭ //github.com/mbostock/d3/wiki/Formatting#numbers por numeroj kaj //github.com/mbostock/d3/wiki/Time-Formatting por tempoinformoj
- fontcolor: Tekstokoloro
- fontsize: Tekstograndeco
- offset: Ŝovas la tekston laŭ la donita Offset. Ĉe kolumnaj kaj cirklaj diagramoj (kun
midangle
-angula valoro) tio krome difinas, ĉu la teksto estu skribata en aŭ ekster la diagramaj grafikoj. - angle (nur cirklaj diagramoj): Angulo en grado aŭ
midangle
(normo) por dinamika angulo baziĝanta sur la angulo de la cirkla parto.
- innerRadius: Interna radiuso por krei el cirkla diagramo ringan diagramon.
Atentigo: En la antaŭrigardo la Graph-funkcio kreas kanvaso-elementon kun vektora grafiko. Ĉe la konservado tamen el tio estas kreata PNG-dosiero.
Ekzemploj
[redakti fonton]Liniaj, areaj kaj kolumnaj diagramoj
[redakti fonton]Liniodiagramo:
{{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}}
Rimarko: La y-akso de la liniaj diagramoj norme komenciĝas ĉe la plej malgranda valoro, kio tamen estas ŝanĝebla per la parametro yAxisMin
.
Liniodiagramo kun ordinala skalo:
{{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}}
Linio diagramo kun valoroj de kalendaraj datoj (nur angla eldono):
{{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}}
Areodiagramo:
{{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}}
Rimarko: La y-akso de areaj diagramoj norme komenciĝas ĉe 0.
Kolumna diagramo kun aksopriskriboj:
{{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}}
Kolumna diagramo kun eldono de valoroj:
{{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=}}
Kolumna diagramo kun eldono de valoroj ekster la kolumnoj:
{{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}}
Liniodiagramo kun pluraj datumaj serioj kaj propra kolorskemo:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Klarigoj|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}}
Areodiagramo kun pluraj datumaj serioj kaj travideblaj areoj:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Klarigoj|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}}
Kolumnodiagramo kun pluraj datumaj serioj:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Klarigoj|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|colors=#800000aa,#80ff8000}}
Stakigataj diagramoj
[redakti fonton]Stakigata areodiagramo kun interpolacio:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Klarigoj|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}}
Stakigata kolumna diagramo:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Klarigoj|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=Vico A|y2Title=Vico B|colors=seagreen, orchid}}
Tortodiagramo
[redakti fonton]Tortodiagramo:
{{Graph:Chart|width=100|height=100|type=pie|legend=Klarigoj|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
Tortodiagramo kun priskriboj:
{{Graph:Chart|width=100|height=100|type=pie|legend=Klarigoj|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}
Tortodiagramo kun variaj radiusoj:
{{Graph:Chart|width=100|height=100|type=pie|legend=Klarigoj|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=}}
Ringdiagramo:
{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Klarigoj|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}