Souhrn: Dokumentace k použití klíčů v grafech. Klíče lze použít, pokud máte (například) více sad dat, které je třeba identifikovat. Interaktivní klíče to mohou ještě vylepšit
- Úvod
- Vlastnosti konfigurace klíčů
- Aktivní prvky klíčů
- Použití interaktivních klíčů v grafech
- HTML klíče
.
Úvod
Použití klíče v grafu umožňuje poskytnout informace o tom, co reprezentují datové sady zobrazené v grafu.
Klíče lze použít ve dvou různých režimech – vodorovném, který je určen k umístění na okraje grafu, a svislém, který je určen k umístění nad graf.
Vlastnosti konfigurace kláves
Dostupné vlastnosti kláves a jejich výchozí hodnoty jsou uvedeny níže(některé typy grafů mají mírně odlišné výchozí hodnoty, které jim vyhovují):
Vlastnosti klíče
| Vlastnost | Popis | Výchozí |
|---|---|---|
| klíč | Pole prvků klíče (jedná se o text, který se v klíči zobrazuje. | (Prázdné pole) |
| keyHalign | Vodorovné zarovnání klíče | vpravo |
| keyPosition | Určuje polohu/rozložení klíče. Možné hodnoty jsou graf a okraj. | graph |
| keyPositionMarginBoxed | Když je klíč v režimu okraj, určuje, zda se nachází v rámečku. | false |
| keyPositionGraphBoxed | Když je klíč v režimu graf, určuje, zda se nachází v rámečku. | true |
| keyPositionX | Tato funkce umožňuje určit souřadnici X pro klíč. | null |
| keyPositionY | To umožňuje zadat souřadnici Y pro klíč. | null |
| keyShadow | To řídí, zda má klíč stín, nebo ne. | false |
| keyShadowOffsetx | Tento parametr řídí posunutí stínu v ose X. | 2 |
| keyShadowOffsety | Řídí posunutí stínu o Y. | 2 |
| keyShadowColor | Řídí barvu stínu. | #666 |
| keyShadowBlur | Tímto se ovládá rozmazání, které se použije na stín. | 3 |
| keyColors | Pokud vypočtené barvy neodpovídají vašim představám – umožňuje zadat vlastní barvy. | null |
| keyColorShape | Toto je tvar, který barevná skvrna nabývá. | čtverec (může to být pole tvarů) |
| keyBackground | Pozadí klíče. | bílé |
| keyRounded | Zda jsou rohy klíče čtvercové nebo zaoblené. | pravdivé |
| keyLinewidth | Šířka čáry použitá pro klíč. | 1 |
| keyLabelsFont | Písmo použité pro text klíče. | |
| keyLabelsSize | Velikost textu v klíči. | |
| keyLabelsColor | Barva textu v klíči. | black |
| keyLabelsBold | Zda je text v klíči tučný nebo ne. | false |
| keyLabelsItalic | Zda je text v klíči psán kurzívou nebo ne. | false |
| keyLabelsOffsetx | Odsazení, které se použije na souřadnici X k textu klíče. | 0 |
| keyLabelsOffsety | Odsazení, které se použije na souřadnici Y k textu klíče. | 0 |
| keyTextAccessible | Ve výchozím nastavení text klíče NENÍ přístupný, ale pomocí tohoto nastavení to můžete přepsat. | null |
| keyInteractive | Zda je klíč interaktivní nebo ne. Ne všechny typy grafů to podporují. | false |
| keyInteractiveHighlightChartFill | Barva výplně zvýraznění použitá pro zvýraznění grafu interaktivním klíčem. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | Barva zvýrazňovacího tahu použitá pro zvýraznění grafu interaktivním klíčem. | černá |
Pole prvků klíče (jedná se o text, který je zobrazen v klíči.
Výchozí: (Prázdné pole)
keyHalign
Vodorovné zarovnání klíče
Výchozí: vpravo
keyPosition
Určuje polohu/rozložení klíče. Možné hodnoty jsou graf a okraj.
Výchozí: graph
keyPositionMarginBoxed
Když je klíč v režimu okraj, určuje, zda se nachází v rámečku.
Výchozí: false
keyPositionGraphBoxed
Když je klíč v režimu graf, určuje, zda se nachází v rámečku.
Výchozí: true
keyPositionX
Tímto můžete zadat souřadnici X pro klíč.
Výchozí: null
keyPositionY
Toto umožňuje zadat souřadnici Y pro klíč.
Výchozí: null
keyShadow
Toto určuje, zda má klíč stín, nebo ne.
Vypnuto: 3
keyColors
Pokud vypočtené barvy neodpovídají vašim představám, můžete zadat vlastní barvy.
Vypnuto: null
keyColorShape
Tento parametr určuje tvar barevné skvrny.
Výchozí: čtverec (může to být pole tvarů)
keyBackground
Pozadí klíče.
Výchozí: bílá
keyRounded
Zda jsou rohy klíče čtvercové nebo zaoblené.
Vypnuto: true
keyLinewidth
Šířka řádku použitá pro klíč.
Vypnuto: 1
keyLabelsFont
Písmo použité pro text klíče.
Vypnuto:
keyLabelsSize
Velikost textu v klíči.
Vypnuto:
keyLabelsColor
Barva textu v klíči.
Vypnuto: černá
keyLabelsBold
Zda je text v klíči tučný, nebo ne.
Vypnuto: false
keyLabelsItalic
Zda je text v klíči psán kurzívou, nebo ne.
Vypnuto: false
keyLabelsOffsetx
Odsazení, které se použije na souřadnici X k textu klíče.
Výchozí: 0
keyLabelsOffsety
Odsazení, které se použije na souřadnici Y k textu klíče.
Výchozí: 0
keyTextAccessible
Ve výchozím nastavení text klíče NENÍ přístupný, ale pomocí tohoto nastavení to můžete přepsat.
Výchozí: null
keyInteractive
Zda je klíč interaktivní nebo ne. Ne všechny typy grafů toto podporují.
Výchozí: false
keyInteractiveHighlightChartFill
Barva výplně zvýraznění použitá pro zvýraznění grafu interaktivním klíčem.
Výchozí: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
Barva zvýraznění výplně použitá pro zvýraznění grafu interaktivním klíčem.
Výchozí: černá
Aktivní klíčové prvky
Když najedete myší nebo kliknete na klíčový prvek/záznam, pak registr RGraph bude obsahovat podrobnosti o příslušném klíčovém záznamu. Ve svém posluchači událostí tedy budete moci určit klíčovou položku takto:
key = RGraph.Registry.get('key-element');
A můžete ji použít takto:
// Assume that the variable is your line chart objectline.canvas.onmousemove = function (e){ var key = RGraph.Registry.get('key-element'); if (key) { // Log the details of the object to the console console.log(key); }};
Použití interaktivních klíčů na grafech
textAccessible, ale interaktivní klíč jej bude ignorovat. Dříve byl interaktivní klíč implementován pouze pro čárové a koláčové grafy. Od poloviny roku 2013 však byla přepsána a nyní je k dispozici u mnohem více typů grafů. Ukázkové stránky pro interaktivní klíč jsou k dispozici v archivu ke stažení.
Po přepsání interaktivní klíč nyní používá objekt kreslicího rozhraní API Rect a dynamickou knihovnu:
<script src="RGraph.common.core.js"></script><script src="RGraph.common.dynamic.js"></script><script src="RGraph.common.key.js"></script><script src="RGraph.drawing.rect.js"></script><script> line = new RGraph.Line({ id: 'cvs', data: , , ], options: { xaxisLabels: , tickmarksStyle: 'endcircle', linewidth: 3, xaxisTickmarksCount: 12, spline: true, key: , keyPosition: 'margin', keyInteractive: true, textSize: 14 } }).draw();</script>
Klíče HTML
V prosinci 2013 byla do RGraph přidána funkce, která umožňuje používat vedle grafu klíč založený na HTML. Tento klíč se skládá ze značek DIV a SPAN, takže se vám s ním možná bude lépe pracovat. Více informací o klíčích HTML si můžete přečíst na této stránce.