Ŝablono:Graph:Chart/dokumentado

Ĉi tiu ŝablono servas al la surekranigo de diagramoj per la Graph-etendilo.

Parametroj

• width: Larĝo de diagramo
• height: Alto de diagramo
• type: Diagramtipo: line por liniodiagramoj, area por areodiagramoj, rect por kolumnodiagramoj kaj pie por cirklodiagramoj (tortodiagramoj). Per la prefikso stacked (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 estas category10).
• 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 formato JJJJ/MM/TT) kaj string 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

Liniaj, areaj kaj kolumnaj diagramoj

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

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

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