Sammanfattning: Dokumentation om hur du använder nycklar i dina diagram. Nycklar kan användas när du (till exempel) har flera uppsättningar data som måste identifieras. Interaktiva nycklar kan förbättra detta ytterligare
- Introduktion
- Nyckelkonfigurationsegenskaper
- Aktiva nyckelelement
- Användning av interaktiva nycklar i dina diagram
- HTML-nycklar
.
Introduktion
Genom att använda en nyckel i diagrammet kan du ge information om vad de dataset som visas i diagrammet representerar.
Nycklar kan användas i två olika lägen – en horisontell som är utformad för att sitta i marginalerna av diagrammet och en vertikal som är utformad för att sitta över diagrammet.
Nyckelkonfigurationsegenskaper
De tillgängliga nyckelegenskaperna och deras standardvärden listas nedan (vissa diagramtyper har något annorlunda standardvärden som passar):
Nyckelegenskaper
| Egenskap | Beskrivning | Standard |
|---|---|---|
| Nyckel | En matris med nyckelelement (detta är texten som visas i nyckeln. | (En tom array) |
| keyHalign | Nyckelns horisontella justering | höger |
| keyPosition | Detta bestämmer nyckelns positionering/layout. Möjliga värden är graph och margin. | graph |
| keyPositionMarginBoxed | När nyckeln är i marginaläge avgör detta om den sitter i en ruta. | false |
| keyPositionGraphBoxed | När nyckeln är i graph-läge avgör detta om den sitter i en ruta. | true |
| keyPositionX | Detta gör det möjligt att ange en X-koordinat för nyckeln. | null |
| keyPositionY | Här kan du ange en Y-koordinat för nyckeln. | null |
| keyShadow | Detta styr om nyckeln har en skugga eller inte. | false |
| keyShadowOffsetx | Detta styr X-förskjutningen för skuggan. | 2 |
| keyShadowOffsety | Detta styr Y-förskjutningen för skuggan. | 2 |
| keyShadowColor | Detta styr färgen på skuggan. | #666 |
| keyShadowBlur | Detta styr den oskärpa som tillämpas på skuggan. | 3 |
| keyColors | Om de beräknade färgerna inte är vad du vill se – här kan du ange dina egna färger. | null |
| keyColorShape | Det här är formen som färgklumpen tar. | kvadrat (kan vara en array av former) |
| keyBackground | Nyckelns bakgrund. | vit |
| keyRounded | Om tangentens hörn är fyrkantiga eller avrundade. | true |
| keyLinewidth | Linjebredden som används för tangenten. | 1 |
| keyLabelsFont | Det typsnitt som används för nyckeltexten. | |
| keyLabelsSize | Storleken på texten i nyckeln. | |
| keyLabelsColor | Färgen på texten i nyckeln. | black |
| keyLabelsBold | Om texten i nyckeln är fetstilad eller inte. | false |
| keyLabelsItalic | Om texten i nyckeln är kursiv eller ej. | false |
| keyLabelsOffsetx | Den förskjutning som appliceras på X-koordinaten till nyckeltexten. | 0 |
| keyLabelsOffsety | Den förskjutning som tillämpas på Y-koordinaten till nyckeltexten. | 0 |
| keyTextAccessible | Som standard är nyckeltexten INTE tillgänglig, men med den här inställningen kan du åsidosätta detta. | null |
| keyInteractive | Om nyckeln är interaktiv eller inte. Alla diagramtyper har inte stöd för detta. | false |
| keyInteractiveHighlightChartFill | Fyllningsfärgen som används för att framhäva diagrammet med hjälp av den interaktiva nyckeln. | rgba(255,255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | Färgen för markeringsstreck som används för att markera diagrammet med den interaktiva nyckeln. | black |
En matris med nyckelelement (det här är den text som visas i nyckeln.
Default: (En tom matris)
keyHalign
Nyckelns horisontella justering
Default: höger
keyPosition
Detta bestämmer nyckelns positionering/layout. Möjliga värden är graph och margin.
Default: graph
keyPositionMarginBoxed
När nyckeln är i marginaläge bestämmer detta om den sitter i en ruta.
Default: false
keyPositionGraphBoxed
När nyckeln är i graph-läge bestämmer detta om den sitter i en ruta.
Default: true
keyPositionX
Det här gör det möjligt att ange en X-koordinat för nyckeln.
Default: null
keyPositionY
Med detta kan du ange en Y-koordinat för nyckeln.
Default: null
keyShadow
Detta styr om nyckeln har en skugga eller inte.
Default: false
keyShadowOffsetx
Detta styr X-offset för skuggan.
Default: 2
keyShadowOffsety
Detta styr Y-offset för skuggan.
Default: 2
keyShadowColor
Detta styr färgen på skuggan.
Default: #666
keyShadowBlur
Detta styr den oskärpa som tillämpas på skuggan.
Standard: 3
keyColors
Om de beräknade färgerna inte är vad du vill se kan du ange dina egna färger.
Standard: null
keyColorShape
Detta är den form som färgklumpen tar.
Default: square (can be an array of shapes)
keyBackground
Nyckelns bakgrund.
Default: white
keyRounded
Om nyckelns hörn är fyrkantiga eller rundade.
Standard: true
keyLinewidth
Linjebredden som används för nyckeln.
Standard: 1
keyLabelsFont
Typsnittet som används för nyckeltexten.
Standard:
keyLabelsSize
Storleken på texten i nyckeln.
Standard:
keyLabelsColor
Färgen på texten i nyckeln.
Standard: svart
keyLabelsBold
Om texten i nyckeln är fet eller inte.
Standard: false
keyLabelsItalic
Om texten i nyckeln är kursiv eller inte.
Standard: false
keyLabelsOffsetx
Den förskjutning som tillämpas på X-koordinaten för nyckeltexten.
Standard: 0
keyLabelsOffsety
Den förskjutning som tillämpas på Y-koordinaten för nyckeltexten.
Standard: 0
keyTextAccessible
Som standard är nyckeltexten INTE tillgänglig, men med hjälp av den här inställningen kan du åsidosätta detta.
Standard: null
keyInteractive
Om nyckeln är interaktiv eller inte. Inte alla diagramtyper har stöd för detta.
Default: false
keyInteractiveHighlightChartFill
Fyllningsfärgen som används för att framhäva diagrammet med den interaktiva tangenten.
Default: rgba(255,255,255,255,0.7)
keyInteractiveHighlightChartStroke
Den färg som används för att framhäva diagrammet med den interaktiva nyckeln.
Standard: svart
Aktiva nyckelelement
När du för muspekaren över eller klickar på ett nyckelelement/en nyckelpost kommer RGraph-registret att innehålla uppgifter om den relevanta nyckelposten. Så i din händelselistare kan du bestämma nyckelposten på följande sätt:
key = RGraph.Registry.get('key-element');
Och du kan använda den så här:
// 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); }};
Användning av interaktiva nycklar på dina diagram
textAccessible om du vill, men den interaktiva nyckeln ignorerar den. Tidigare var den interaktiva nyckeln endast implementerad för linje- och cirkeldiagrammen. Från och med mitten av 2013 skrevs den dock om och är nu tillgänglig för många fler diagramtyper. Demosidorna för den interaktiva nyckeln finns i nedladdningsarkivet.
Efter att ha skrivits om använder den interaktiva nyckeln nu ritnings-API Rect-objektet och det dynamiska biblioteket:
<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-nycklar
I december 2013 lades en funktion till RGraph som gör det möjligt att använda en HTML-baserad nyckel bredvid diagrammet. Den här nyckeln består av DIV- och SPAN-taggar så att du kanske tycker att det är lättare att interagera med den. Du kan läsa mer om HTML-nycklar på den här sidan.