Összefoglaló: Dokumentáció a kulcsok használatáról a diagramokban. A kulcsok akkor használhatók, ha (például) több adatkészletet kell azonosítani. Az interaktív kulcsok ezt tovább fokozhatják
- Bevezetés
- Kulcsok konfigurációs tulajdonságai
- Aktív kulcselemek
- Interaktív kulcsok használata a grafikonokon
- HTML kulcsok
.
Bevezetés
A kulcsok használata a diagramon lehetővé teszi, hogy információt adjon arról, hogy a diagramon megjelenített adatkészletek mit képviselnek.
A kulcsok két különböző módban használhatók – egy vízszintes, amely úgy van kialakítva, hogy a diagram margójára kerüljön, és egy függőleges, amely úgy van kialakítva, hogy a diagram fölé kerüljön.
Kulcskonfigurációs tulajdonságok
A rendelkezésre álló kulcstulajdonságok és alapértelmezett értékeik az alábbiakban vannak felsorolva (egyes diagramtípusok némileg eltérő alapértelmezett értékekkel rendelkeznek):
Kulcs tulajdonságai
Tulajdonság | leírás | alapértelmezett |
---|---|---|
kulcs | A kulcselemek tömbje (ez a kulcsban megjelenő szöveg. | (Üres tömb) |
keyHalign | A billentyű vízszintes igazítása | jobbra |
keyPosition | Ez határozza meg a billentyű pozícióját/elrendezését. A lehetséges értékek a grafikon és a margó. | grafikon |
keyPositionMarginBoxed | Ha a billentyű margó módban van, ez határozza meg, hogy egy dobozban ül-e. | false |
keyPositionGraphBoxed | Ha a billentyű grafikon módban van, ez határozza meg, hogy egy dobozban ül-e. | true |
keyPositionX | Ez lehetővé teszi a billentyű X koordinátájának megadását. | null |
keyPositionY | Ez lehetővé teszi a billentyű Y koordinátájának megadását. | null |
keyShadow | Ez szabályozza, hogy a billentyűnek legyen-e árnyéka vagy sem. | false |
keyShadowOffsetx | Ez szabályozza az árnyék X eltolását. | 2 |
keyShadowOffsety | Ez szabályozza az árnyék Y eltolását. | 2 |
keyShadowColor | Ez szabályozza az árnyék színét. | #666 |
keyShadowBlur | Ez szabályozza az árnyékra alkalmazott elmosódást. | 3 |
keyColors | Ha a kiszámított színek nem olyanok, mint amilyennek látni szeretné – ez lehetővé teszi a saját színek megadását. | null |
keyColorShape | Ez az alak, amit a színfolt felvesz. | négyzet (lehet alakzatok tömbje) |
keyBackground | A kulcs háttere. | fehér |
keyRounded | A kulcs sarkai négyzet alakúak vagy lekerekítettek. | true |
keyLinewidth | A kulcshoz használt vonalszélesség. | 1 |
keyLabelsFont | A kulcs szövegéhez használt betűtípus. | |
keyLabelsSize | A kulcs szövegének mérete. | |
keyLabelsColor | A szöveg színe a kulcsban. | fekete |
keyLabelsBold | Az, hogy a szöveg a kulcsban vastag-e vagy sem. | false |
keyLabelsItalic | Hogy a kulcsban lévő szöveg dőlt betűs-e vagy sem. | false |
keyLabelsOffsetx | Az eltolás, amelyet a kulcs szövegének X koordinátájára alkalmaznak. | 0 |
keyLabelsOffsety | A kulcsszöveg Y koordinátájára alkalmazott eltolás. | 0 |
keyTextAccessible | Alapértelmezés szerint a billentyű szövege NEM elérhető, de ezzel a beállítással ezt felülírhatja. | null |
keyInteractive | Hogy a billentyű interaktív-e vagy sem. Nem minden diagramtípus támogatja ezt. | false |
keyInteractiveHighlightChartFill | A diagram kiemeléséhez használt kitöltőszín az interaktív billentyűvel. | rgba(255,255,255,255,0.7) |
keyInteractiveHighlightChartStroke | A diagramnak az interaktív billentyűvel történő kiemelésére használt kiemelési vonás színe. | fekete |
A kulcselemek tömbje (ez az a szöveg, amely a kulcsban megjelenik.
Default: (Üres tömb)
keyHalign
A billentyű vízszintes igazítása
Egyértelmezett: jobbra
keyPosition
Ez határozza meg a billentyű pozicionálását/elrendezését. A lehetséges értékek a grafikon és a margó.
Egyértelmezett: grafikon
keyPositionMarginBoxed
Ha a billentyű margó módban van, ez határozza meg, hogy egy dobozban ül-e.
Egyértelmezett: hamis
keyPositionGraphBoxed
Ha a billentyű grafikon módban van, ez határozza meg, hogy egy dobozban ül-e.
Egyértelmezett: true
keyPositionX
Ez lehetővé teszi a billentyű X koordinátájának megadását.
Default: null
keyPositionY
Ez lehetővé teszi a billentyű Y koordinátájának megadását.
Default: null
keyShadow
Ez szabályozza, hogy a billentyűnek legyen-e árnyéka vagy sem.
Egyértelmezett: false
keyShadowOffsetx
Ez szabályozza az árnyék X eltolását.
Egyértelmezett: 2
keyShadowOffsety
Ez szabályozza az árnyék Y eltolását.
Egyértelmezett: 2
keyShadowColor
Ez szabályozza az árnyék színét.
Egyértelmezett:
Ez szabályozza az árnyékra alkalmazott elmosódást.
Egyértelmezett: 3
keyColors
Ha a számított színek nem olyanok, mint amit látni szeretne – ez lehetővé teszi a saját színek megadását.
Egyértelmezett: null
keyColorShape
Ez az alak, amit a színfolt felvesz.
Egyértelmezett: négyzet (lehet alakzatok tömbje is)
keyBackground
A kulcs háttere.
Egyértelmezett: fehér
keyRounded
A kulcs sarkai négyzet alakúak vagy lekerekítettek.
Egyértelmezett: true
keyLinewidth
A kulcshoz használt vonalszélesség.
Egyértelmezett: 1
keyLabelsFont
A kulcs szövegéhez használt betűtípus.
Egyértelmezett:
keyLabelsSize
A kulcsban lévő szöveg mérete.
Alapértelmezett:
keyLabelsColor
A kulcsban lévő szöveg színe.
Egyértelmezett: fekete
keyLabelsBold
A kulcsban lévő szöveg félkövér-e vagy sem.
Egyértelmezett: false
keyLabelsItalic
Hogy a kulcsban lévő szöveg dőlt betűs-e vagy sem.
Egyértelmezett: false
keyLabelsOffsetx
A kulcs szövegének X koordinátájára alkalmazott eltolás.
Egyértelmezett: 0
keyLabelsOffsety
A kulcsszöveg Y koordinátájára alkalmazott eltolás.
Egyértelmezett: 0
keyTextAccessible
A kulcsszöveg alapértelmezés szerint NEM elérhető, de ezzel a beállítással ezt felülbírálhatja.
Egyértelmezett: null
keyInteractive
A kulcs interaktív-e vagy sem. Nem minden diagramtípus támogatja ezt.
Egyértelmezett: false
keyInteractiveHighlightChartFill
A diagramok interaktív billentyűvel történő kiemeléséhez használt kitöltési szín.
Egyértelmezett: rgba(255,255,255,255,0.7)
keyInteractiveHighlightChartStroke
A diagram interaktív billentyűvel történő kiemeléséhez használt kiemelési vonás színe.
Egyértelmezett: fekete
Active key elements
Ha egy kulcselem/bejegyzés fölé mozgatja a mutatót vagy rákattint, akkor az RGraph nyilvántartása tartalmazza a vonatkozó kulcsbejegyzés adatait. Így az eseményhallgatóban így tudja majd meghatározni a kulcsbejegyzést:
key = RGraph.Registry.get('key-element');
És így használhatja:
// 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); }};
Interaktív kulcsok használata a grafikonokon
textAccessible
-t, de az interaktív billentyű figyelmen kívül hagyja. Korábban az interaktív billentyű csak a vonal- és a kördiagramokhoz volt implementálva. 2013 közepétől azonban átírták, és most már sokkal több diagramtípushoz elérhető. Az interaktív kulcs demóoldalai a letöltési archívumban találhatók.
Az újraírás után az interaktív kulcs most már a rajzoló API Rect
objektumot és a dinamikus könyvtárat használja:
<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>
HTML kulcsok
2013 decemberében egy olyan funkciót adtunk az RGraph-hoz, amely lehetővé teszi, hogy HTML alapú kulcsot használjunk a diagram mellett. Ez a kulcs DIV és SPAN tagekből áll, így talán könnyebb lesz vele interakcióba lépni. Ezen az oldalon többet olvashat a HTML kulcsokról.