Ŝablono:Graph:Chart

[antaŭrigardi] [redakti] [historio] [renovigi]

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

---

Se vi havas demandon pri ĉi tiu ŝablono, tiam vi povas demandi en la ŝablonprojekta diskutejo. La Intervikiaj ligiloj estu metataj al Vikidatumoj. (Vidu Helpopaĝon pri tio.)

Uzado de la ŝablono en artikoloj. (Helpo pri la koncerna Dok-parametro) Ĉi tiu dokumentado estas enplektita el subpaĝo. Listo de subpaĝoj.