Použití
Šablona {{Graf}}, jak název napovídá, slouží k vykreslování grafů.
Parametry
| Parametr | Hodnota | Popisek |
|---|---|---|
| width | přirozené číslo (integer) | šířka grafu v pixelech |
| height | přirozené číslo (integer) | výška grafu v pixelech |
| type | line
|
liniový graf |
area
|
plošný graf, liniový s polygony | |
rect
|
sloupcový graf | |
pie
|
výsečový graf, koláčový graf | |
stacked*
|
pro složené grafy použijte předponu stacked, kupříkladu stackedarea
| |
| interpolate | monotone
|
doporučená metoda interpolace, více viz https://vega.github.io/vega/docs/marks/area/ |
step-before
| ||
step-after
| ||
basis
| ||
basis-open
| ||
cardinal
| ||
cardinal-open
| ||
| colors | #rgb/#rrggbb/#aarrggbb případně pojmenované barvy
|
paleta barev se odděluje mezi sebou čárkou, pro #aarrggbb komponenta aa určuje alfa kanál (průhlednost). Defaultní barevná paleta je category10
|
| xAxisTitle | řetězec (string) | titulek osy X |
| yAxisTitle | řetězec (string) | titulek osy Y |
| xAxisMin, xAxisMax | hodnota viz xType, yType | minimální a maximální hodnoty na ose X |
| yAxisMin, yAxisMax | hodnota viz xType, yType | minimální a maximální hodnoty na ose Y |
| xAxisFormat, yAxisFormat |
|
mění formátování os, více detailů:
Například |
| xType, yType | integer
|
datový typ hodnot, přirozené číslo |
number
|
datový typ hodnot, reálné číslo | |
date
|
datový typ hodnot, datum (př. DD. MM. YYYY) | |
string
|
datový typ hodnot, nutno uvést všechny hodnoty v pořadí | |
| x | hodnoty | hodnoty x souřadnice jako seznam oddělený čárkou |
| y nebo y1, y2 | hodnoty | hodnoty y souřadnice jako seznam oddělený čárkou, v případě více sérií dat použijte pořadové číslo, pro výsečové (koláčové) grafy hodnota y2 určuje rádius daného sektoru |
| legend | (bez hodnoty) | ukáže legendu (funguje jen pro sérii více dat) |
| y1Title, y2Title | řetězec (string) | popisky jednotlivých dat datové série, používá se v případě legendy |
| linewidth | přirozené číslo (integer) | šířka čáry liniových grafů nebo vzdálenost mezi segmenty výsečových (koláčových) grafů |
| showValues | výstup je konfigurován u jednotlivých hodnot jako name1:value1, name2:value2...
|
umožňuje vrátit hodnoty y jako text |
| format | formát výstupu podle https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers pro čísla, a podle https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md pro data | |
| fontcolor | barva textu | |
| fontsize | velikost textu | |
| offset | posunutí textu o daný offset, pro sloupcové a výsečové (koláčové) grafy je možno použít midangle , který definuje jestli bude text umístěn vevnitř nebo vně grafu
| |
| angle (pouze výsečové /koláčové/ grafy) | úhel textu se definuje pomocí midangle
| |
| showSymbols | (pouze pro liniové grafy) | zobrazí symbol (circle) pro každý datový bod |
| innerRadius | (pouze výsečové /koláčové/ grafy) | definuje vnitřní rádius, pro vytváření prstencových grafů (výsečové grafy s dírou ve přostřed) |
Poznámka: V náhledu editoru graf vytváří html 5 element typu <canvas> za použití vektorové grafiky a bude se chovat lehce odlišně, například při najetí myši (hover) se zvýrazní data. Nicméně, při ukládání stránky se vytvoří PNG rastrová grafika (řada zařízení nepodporuje html 5).
Příklady
- Liniový graf
Poznámka: Osa y začíná od nejnižší hodnoty. Toto chování lze změnit pomocí parametru yAxisMin.
- Liniový graf s polygony
Poznámka: Osa y začíná od nuly.
- Sloupcový graf
- Liniový graf s dvěma sériemi dat, s použitím barev
- Liniový graf s dvěma sériemi dat a překrývajícími se barevnými polygony
- Sloupcový graf se dvěma soubory dat
- Liniový graf se zvlněnými plochami místo polygonů
- Sloupcový graf se sloučenými sloupci
- Výsečový (koláčový) graf
{{Graf|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}}
- Výsečový (koláčový) graf s popisem ve výsečích
{{Graf|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=}}
- Výsečový (koláčový) graf s různým poloměrem výsečí
{{Graf|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=}}
- Výsečový (koláčový) graf s vyjmutým středem
{{Graf|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}}
| Zdroj dat | cs.wikipedia.org |
|---|---|
| Originál | cs.wikipedia.org/wiki/Šablona:Graf |
