Summary: Documentație despre utilizarea cheilor în diagrame. Cheile pot fi utilizate atunci când aveți (de exemplu) mai multe seturi de date care trebuie să fie identificate. Cheile interactive pot îmbunătăți și mai mult acest lucru
- Introducere
- Proprietăți de configurare a cheilor
- Elemente cheie active
- Utilizarea cheilor interactive pe graficele dumneavoastră
- Clave HTML
.
Introducere
Utilizarea unei chei pe graficul dumneavoastră vă permite să furnizați informații despre ceea ce reprezintă seturile de date care sunt afișate pe grafic.
Cheile pot fi utilizate în două moduri diferite – una orizontală, concepută pentru a fi așezată în marginile graficului, și una verticală, care este concepută pentru a fi așezată deasupra graficului.
Proprietăți de configurare a tastelor
Proprietățile disponibile ale tastelor și valorile implicite ale acestora sunt enumerate mai jos (unele tipuri de diagrame au valori implicite ușor diferite pentru a se potrivi):
Proprietăți cheie
| Proprietate | Descriere | Defect | |
|---|---|---|---|
| cheie | Un tablou de elemente cheie (acesta este textul care este afișat în cheie. | (Un tablou gol) | |
| keyHalign | Alinierea orizontală a tastei | dreapta | |
| keyPosition | Aceasta determină poziționarea/dispunerea tastei. Valorile posibile sunt graph și margin. | graph | |
| keyPositionMarginBoxed | Când tasta este în modul margin, aceasta determină dacă este așezată într-o cutie. | false | |
| keyPositionGraphBoxed | Când tasta este în modul graph, aceasta determină dacă este așezată într-o cutie. | true | |
| keyPositionX | Acest lucru vă permite să specificați o coordonată X pentru cheie. | null | |
| keyPositionY | Aceasta vă permite să specificați o coordonată Y pentru cheie. | null | |
| keyShadow | Aceasta controlează dacă cheia are sau nu o umbră. | false | |
| keyShadowOffsetx | Aceasta controlează decalajul X pentru umbră. | 2 | |
| keyShadowOffsety | Aceasta controlează decalajul Y pentru umbră. | 2 | |
| keyShadowColor | Aceasta controlează culoarea umbrei. | #666 | |
| keyShadowBlur | Aceasta controlează neclaritatea care se aplică umbrei. | 3 | |
| keyColors | Dacă culorile calculate nu sunt cele pe care doriți să le vedeți – acest lucru vă permite să specificați propriile culori. | null | |
| keyColorShape | Aceasta este forma pe care o ia pata de culoare. | square (poate fi o matrice de forme) | |
| keyBackground | Fundalul cheii. | white | |
| keyRounded | Dacă colțurile cheii sunt pătrate sau rotunjite. | true | |
| keyLinewidth | Lățimea liniei folosită pentru cheie. | 1 | |
| keyLabelsFont | Fontul utilizat pentru textul cheii. | ||
| keyLabelsSize | Dimensiunea textului din cheie. | ||
| keyLabelsColor | Culoarea textului din cheie. | black | |
| keyLabelsBold | Dacă textul din cheie este sau nu bold. | false | |
| keyLabelsItalic | Dacă textul din cheie este italic sau nu. | false | |
| keyLabelsOffsetx | Calajul care se aplică coordonatei X la textul din cheie. | 0 | |
| keyLabelsOffsety | Decalajul care se aplică coordonatei Y a textului cheie. | 0 | |
| keyTextAccessible | În mod implicit, textul cheii NU este accesibil, dar prin utilizarea acestei setări puteți anula acest lucru. | null | |
| keyInteractive | Dacă cheia este interactivă sau nu. Nu toate tipurile de diagrame suportă acest lucru. | false | |
| keyInteractiveHighlightChartFill | Culoarea de umplere a evidenței folosită pentru a evidenția graficul prin tasta interactivă. | rgba(255,255,255,255,0.7) | |
| keyInteractiveHighlightChartStroke | Culoarea de evidențiere folosită pentru a evidenția graficul prin tasta interactivă. | black |
O matrice de elemente cheie (acesta este textul care este afișat în cheie.
Default: (Un array gol)
keyHalign
Alinierea orizontală a tastei
Default: right
keyPosition
Aceasta determină poziționarea/dispunerea tastei. Valorile posibile sunt graph și margin.
Default: graph
keyPositionMarginBoxed
Când tasta este în modul margin, acest lucru determină dacă este așezată într-o cutie.
Default: false
keyPositionGraphBoxed
Când tasta este în modul graph, acest lucru determină dacă este așezată într-o cutie.
Default: true
keyPositionX
Aceasta vă permite să specificați o coordonată X pentru tastă.
Default: null
keyPositionY
Acest lucru vă permite să specificați o coordonată Y pentru cheie.
Default: null
keyShadow
Acest lucru controlează dacă cheia are sau nu o umbră.
Default: false
keyShadowOffsetx
Acest lucru controlează decalajul X pentru umbră.
Default: 2
keyShadowOffsety
Acest lucru controlează decalajul Y pentru umbră.
Default: 2
keyShadowColor
Acest lucru controlează culoarea umbrei.
Default: 2
keyShadowColor
Acest lucru controlează culoarea umbrei.
Default: #666
keyShadowBlur
Aceasta controlează neclaritatea care se aplică umbrei.
Default: 3
keyColors
Dacă culorile calculate nu sunt cele pe care doriți să le vedeți – aceasta vă permite să specificați propriile culori.
Default: null
keyColorShape
Aceasta este forma pe care o ia pata de culoare.
Default: square (poate fi o matrice de forme)
keyBackground
Fundalul cheii.
Default: white
keyRounded
Dacă colțurile cheii sunt pătrate sau rotunjite.
Default: true
keyLinewidth
Lățimea de linie folosită pentru cheie.
Default: 1
keyLabelsFont
Fontul folosit pentru textul cheii.
Default: 1
keyLabelsFont
Fontul folosit pentru textul cheii.
Default:
keyLabelsSize
Dimensiunea textului din cheie.
Default:
keyLabelsColor
Culoarea textului din cheie.
Default: black
keyLabelsBold
Dacă textul din cheie este bold sau nu.
Default: false
keyLabelsItalic
Dacă textul din cheie este italic sau nu.
Default: false
keyLabelsOffsetx
Calajul care se aplică coordonatei X la textul din cheie.
Default: 0
keyLabelsOffsety
Decalajul care se aplică coordonatei Y a textului cheii.
Default: 0
keyTextAccessible
În mod implicit, textul cheii NU ESTE accesibil, dar prin utilizarea acestei setări puteți anula acest lucru.
Default: null
keyInteractive
Dacă cheia este interactivă sau nu. Nu toate tipurile de diagrame acceptă acest lucru.
Default: false
keyInteractiveInteractiveHighlightChartFill
Culoarea de umplere a evidenței folosită pentru a evidenția graficul prin tasta interactivă.
Default: rgba(255,255,255,255,0.7)
keyInteractiveInteractiveHighlightChighlightChartStroke
Culoarea de trasare folosită pentru a evidenția graficul cu ajutorul tastei interactive.
Default: black
Elemente cheie active
Când treceți deasupra sau faceți clic pe un element cheie sau pe o intrare cheie, registrul RGraph va conține detalii despre intrarea cheie relevantă. Prin urmare, în dispozitivul de ascultare a evenimentelor, veți putea determina intrarea cheie astfel:
key = RGraph.Registry.get('key-element');
Și îl puteți utiliza în felul următor:
// 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); }};
Utilizarea de chei interactive pe graficele dumneavoastră
textAccessible dacă doriți, dar tasta interactivă o va ignora. Anterior, tasta interactivă a fost implementată numai pentru graficele Line și Pie. De la jumătatea anului 2013, însă, a fost rescrisă și este acum disponibilă cu mult mai multe tipuri de diagrame. Paginile demo pentru tasta interactivă sunt disponibile în arhiva de descărcare.
După ce a fost rescrisă, tasta interactivă utilizează acum obiectul API de desenare Rect și biblioteca dinamică:
<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>
Clave HTML
În decembrie 2013 a fost adăugată o funcție la RGraph care vă permite să folosiți o cheie bazată pe HTML alături de graficul dvs. Această cheie este alcătuită din tag-uri DIV și SPAN, astfel încât este posibil să vă fie mai ușor să interacționați cu ea. Puteți citi mai multe despre cheile HTML pe această pagină.