Šablóna:Graph:Chart

Túto dokumentáciu [upraviť] [história] [obnoviť]

Dokumentácia

Šablóna {{Graph:Chart}} umožňuje jednoduché vkladanie základných typov grafov a diagramov.

Použitie

Parametre

Parameter	Hodnota	Popis
width	prirodzené číslo (integer)	šírka grafu v pixloch
height	prirodzené číslo (integer)	výška grafu v pixloch
type	`line`	čiarový graf
	`area`	plošný graf (čiarový s polygónmi)
	`rect`	stĺpcový graf
	`pie`	koláčový diagram
	`stacked*`	pre zložené grafy použite predponu stacked, napr. `stackedarea`
interpolate	`monotone`	odporúčaná metóda interpolácie, viac viď https://github.com/vega/vega/wiki/Marks#area
	`step-before`
	`step-after`
	`basis`
	`basis-open`
	`cardinal`
	`cardinal-open`
colors	`#rgb`/`#rrggbb`/`#aarrggbb` prípadne pomenovanej farby	čiarkou oddelený zoznam farieb, pri `#aarrggbb` zložka `aa` určuje alfa kanál (priehľadnosť). Predvolená farebná paleta je `category10`
xAxisTitle	reťazec (string)	titulok osi X
yAxisTitle	reťazec (string)	titulok osi Y
xAxisMin, xAxisMax	hodnota viď xType, yType	minimálna a maximálna hodnota na osi X
yAxisMin, yAxisMax	hodnota viď xType, yType	minimálna a maximálna hodnota na osi Y
xAxisFormat, yAxisFormat	formátovanie čísel: `[[fill]align][sign][symbol][0][width][,][.precision][type]` formátovanie dátumov: `%a %b %e %H:%M:%S %Y`	mení formátovanie hodnôt na osiach, viac viď: https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md Napr. `%` môže byť použité pre formátovanie percent.
xType, yType	`integer`	dátový typ hodnôt – prirodzené čísla
	`number`	dátový typ hodnôt – reálne čísla
	`date`	dátový typ hodnôt – dátumy (napr. DD. MM. YYYY)
	`string`	dátový typ hodnôt – výčet
x	hodnoty	čiarkou oddelený zoznam X súradníc
y alebo y1, y2	hodnoty	čiarkou oddelený zoznam Y súradníc, v prípade viacerých sád údajov použite poradové číslo, pre koláčové diagramy hodnota y2 určuje polomer daného segmentu
legend	(bez hodnoty)	zobrazí legendu (funguje len pri viacerých sadách údajov)
y1Title, y2Title	reťazec (string)	popisky jednotlivých sád údajov (v prípade zobrazenej legendy)
linewidth	prirodzené číslo (integer)	hrúbka čiary čiarových grafov resp. vzdialenosť medzi segmentami koláčových diagramov
showValues	umožňuje zobraziť v grafe Y hodnoty vo forme textu	formát je možné došpecifikovať atribútmi v tvare `názov1:hodnota1, názov2:hodnota2, ...`
	format	formátovanie hodnôt podľa https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers pre čísla, a podľa https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md pre dátumy
	fontcolor	farba textu
	fontsize	veľkosť textu
	offset	posunutie textu o daný offset. Pri stĺpcových grafoch a koláčových diagramoch s nastaveným `midangle` zároveň určuje, či bude text umiestnený z vnútornej alebo vonkajšej strany segmentu.
	angle (len pre koláčoé diagramy)	uhol sklonu textu v stupňoch alebo `midangle` pre automatický sklon podľa uhlu segmentu (predvolené)
showSymbols	(len pre čiarové grafy)	zobrazí symbol (circle) pre každý bod
innerRadius	(len koláčové diagramy)	definuje vnútorný polomer pre vytvorenie prstencového diagramu (koláčový diagram s vyseknutým stredom)

Poznámka: V režime náhľadu úpravy šablóna vytvára HTML5 element typu <canvas> a zobrazuje grafy vektorovo, pričom sa chová mierne odlišne, napr. pri pohybe myšou (hover) sa zvýrazní údaj. Po uložení stránky sa z grafu vytvorí PNG obrázok (časť zariadení nepodporuje HTML5).

Príklady

Čiarový graf

{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

Poznámka: Os y začína od najnižšej hodnoty. Toto správanie možno zmeniť pomocou parametra yAxisMin.

Plošný graf

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

Poznámka: Os y začína od nuly.

Stĺpcový graf

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

Čiarový graf s dvoma sadami údajov

{{Graph:Chart|width=400|height=100|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}}

Plošný graf s dvoma dadami údajov

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

Stĺpcový graf s dvoma sadami údajov

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

Plošný graf so spojitými krivkami namiesto polygónov

{{Graph:Chart|width=400|height=100|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}}

Stĺpcový graf so zlúčenými stĺpcami

{{Graph:Chart|width=400|height=100|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}}

Koláčový diagram

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

Koláčový diagram s popisom vo výsekoch

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

Koláčový diagram s rôznym polomerom výsekov

{{Graph:Chart|width=100|height=100|type=pie|legend=Legenda|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=}}

Koláčový diagram s vyseknutým stredom (prstencový diagram)

{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

Pozri aj

závislosti, využívané touto šablónou:
- Modul:Graph – Lua modul, transformujúci volanie šablóny na Vega JSON deklaráciu diagramu
- mw:Extension:Graph – MediaWiki rozšírenie, umožňujúce vkladanie Vega diagramov (+ tamojšia demo stránka)
- Vega – deklaratívny jazyk pre tvorbu diagramov
staršie lokálne šablóny a moduly pre tvorbu diagramov:
- Modul:Diagram – stĺpcové a koláčové diagramy pomocou Lua a HTML5
- Šablóna:Koláčový diagram – koláčový diagram pomocou CSS
- Šablóna:Bar box – stĺpcové diagramy pomocou HTML tabuľky a CSS
EasyTimeline – MediaWiki rozšírenie, umožňujúce vkladanie diagramov časových osí a stĺpcových grafov

Ak máte otázku k tejto šablóne, alebo potrebujete jej rozšírenie a neviete ho správne naformátovať, pýtajte sa v diskusii k šablóne. Pokiaľ je potrebné šablónu urgentne opraviť, obráťte sa na technickú podporu. Na testovanie šablóny môžete vytvoriť testy šablóny.

Použitie šablóny v článkoch.
Zoznam podstránok tejto šablóny.