Šablona:Graf

Dokumentace [Zobrazit] [editovat] [historie] [vyprázdnit paměť]

Tato dokumentace je sem přenesena z podstránky Šablona:Graf/doc.

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://github.com/vega/vega/wiki/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}}