Použití

editovat

Šablona {{Graf}}, jak název napovídá, slouží k vykreslování grafů.

Parametry

editovat
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
  • formátování čísel: [​[fill]align][sign][symbol][0][width][,][.precision][type]
  • formátování data: %a %b %e %H:%M:%S %Y
mění formátování os, více detailů:

Například % může být použito pro formátování procent.

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 y1y2 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)
y1Titley2Title ř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

editovat
Liniový graf
{{Graf|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: Osa y začíná od nejnižší hodnoty. Toto chování lze změnit pomocí parametru yAxisMin.

Liniový graf s polygony
{{Graf|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: Osa y začíná od nuly.

Sloupcový graf
{{Graf|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}}

Liniový graf s dvěma sériemi dat, s použitím barev
{{Graf|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}}

Liniový graf s dvěma sériemi dat a překrývajícími se barevnými polygony
{{Graf|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}}

Sloupcový graf se dvěma soubory dat
{{Graf|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}}

Liniový graf se zvlněnými plochami místo polygonů
{{Graf|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}}

Sloupcový graf se sloučenými sloupci
{{Graf|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}}

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