Ö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

key
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

Megjegyzés: Az interaktív kulcs a szabványos vászonszöveget fogja használni a kulcshoz – nem a DOM-szöveget. Ha akarod, engedélyezheted a 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.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.