Šablóna:Graph:Chart
Dokumentácia
Šablóna {{Graph:Chart}} umožňuje jednoduché vkladanie základných typov grafov a diagramov.
Použitie
[upraviť zdroj]Parametre
[upraviť zdroj]| 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 |
|
mení formátovanie hodnôt na osiach, viac viď:
Napr. |
| 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
[upraviť zdroj]- Čiarový graf
 |
Graf je z technických dôvodov dočasne nedostupný. |
Poznámka: Os y začína od najnižšej hodnoty. Toto správanie možno zmeniť pomocou parametra yAxisMin.
- Plošný graf
|
|
Graf je z technických dôvodov dočasne nedostupný. |
Poznámka: Os y začína od nuly.
- Stĺpcový graf
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- Čiarový graf s dvoma sadami údajov
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- Plošný graf s dvoma dadami údajov
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- Stĺpcový graf s dvoma sadami údajov
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- Plošný graf so spojitými krivkami namiesto polygónov
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- Stĺpcový graf so zlúčenými stĺpcami
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- 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}}
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- 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=}}
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- 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=}}
|
|
Graf je z technických dôvodov dočasne nedostupný. |
- 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}}
|
|
Graf je z technických dôvodov dočasne nedostupný. |
Pozri aj
[upraviť zdroj]- 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.