Šablóna:Graph:Chart

z Wikipédie, slobodnej encyklopédie
Skočit na navigaci Skočit na vyhledávání


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

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

Použitie[upraviť kód]

Parametre[upraviť kód]

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ď:

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 y1y2 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)
y1Titley2Title 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[upraviť kód]

Č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[upraviť kód]

  • závislosti, využívané touto šablónou:
  • staršie lokálne šablóny a moduly pre tvorbu diagramov:
  • 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.