Šablona:Graf

Dokumentace  

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

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