Summary: Dokumentation om brug af nøgler i dine diagrammer. Nøgler kan bruges, når du (f.eks.) har flere datasæt, som skal identificeres. Interaktive nøgler kan forbedre dette yderligere
- Indledning
- Nøglekonfigurationsegenskaber
- Aktive nøgleelementer
- Brug af interaktive nøgler på dine diagrammer
- HTML-nøgler
Indledning
Ved at bruge en nøgle på dit diagram kan du give oplysninger om, hvad de datasæt, der vises på diagrammet, repræsenterer.
Nøgler kan bruges i to forskellige tilstande – en vandret nøgle, der er designet til at sidde i margenerne af diagrammet, og en lodret nøgle, der er designet til at sidde over diagrammet.
Nøglekonfigurationsegenskaber
De tilgængelige nøgleegenskaber og deres standardindstillinger er anført nedenfor (nogle diagramtyper har lidt forskellige standardindstillinger, der passer til):
Nøgleegenskaber
| Property | Description | Default |
|---|---|---|
| key | Et array af nøgleelementer (dette er den tekst, der vises i nøglen. | (Et tomt array) |
| keyHalign | Den horisontale justering af nøglen | højre |
| keyPosition | Dette bestemmer placeringen/layoutet af nøglen. Mulige værdier er graf og margin. | graf |
| keyPositionMarginBoxed | Når tasten er i marginaltilstand, bestemmer dette, om den sidder i en boks. | false |
| keyPositionGraphBoxed | Når tasten er i graftilstand, bestemmer dette, om den sidder i en boks. | true |
| keyPositionX | Dette giver dig mulighed for at angive en X-koordinat for nøglen. | null |
| keyPositionY | Dette giver dig mulighed for at angive en Y-koordinat for nøglen. | null |
| keyShadow | Dette styrer, om nøglen har en skygge eller ej. | false |
| keyShadowOffsetx | Dette styrer X-offset for skyggen. | 2 |
| keyShadowOffsety | Dette styrer Y-offset for skyggen. | 2 |
| keyShadowColor | Dette styrer farven på skyggen. | #666 |
| keyShadowBlur | Dette styrer den sløring, der anvendes på skyggen. | 3 |
| keyColors | Hvis de beregnede farver ikke er det, du ønsker at se – giver dette dig mulighed for at angive dine egne farver. | null |
| keyColorShape | Dette er den form, som farveklatten antager. | kvadrat (kan være et array af former) |
| keyBackground | Nøglen har en baggrund. | white |
| keyRounded | Hvis hjørnerne på nøglen er firkantede eller afrundede. | true |
| keyLinewidth | Den linjebredde, der anvendes til nøglen. | 1 |
| keyLabelsFont | Den skrifttype, der anvendes til nøgleteksten. | |
| keyLabelsSize | Størrelsen af teksten i nøgleteksten. | |
| keyLabelsColor | Farven på teksten i nøglen. | black |
| keyLabelsBold | Hvis teksten i nøglen er fed eller ikke. | falsk |
| keyLabelsItalic | Hvis teksten i nøglen er kursiv eller ej. | falsk |
| keyLabelsOffsetx | Den forskydning, der anvendes på X-koordinaten til teksten i nøglen. | 0 |
| keyLabelsOffsety | Den forskydning, der anvendes på Y-koordinaten til nøgleteksten. | 0 |
| keyTextAccessible | Som standard er nøgleteksten IKKE tilgængelig, men ved at bruge denne indstilling kan du tilsidesætte dette. | null |
| keyInteractive | Hvis nøglen er interaktiv eller ej. Ikke alle diagramtyper understøtter dette. | false |
| keyInteractiveHighlightChartFill | Fyldfarven, der bruges til at fremhæve diagrammet ved hjælp af den interaktive tast. | rgba(255,255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | Farven på markeringsstregen, der bruges til at fremhæve diagrammet ved hjælp af den interaktive tast. | black |
Et array af nøgleelementer (dette er den tekst, der vises i nøglen.
Default: (Et tomt array)
keyHalign
Den horisontale justering af nøglen
Default: højre
keyPosition
Dette bestemmer placeringen/layoutet af nøglen. Mulige værdier er graph og margin.
Default: graph
keyPositionMarginBoxed
Når nøglen er i margintilstand, bestemmer dette, om den sidder i en boks.
Default: false
keyPositionGraphBoxed
Når nøglen er i graphtilstand, bestemmer dette, om den sidder i en boks.
Default: true
keyPositionX
Dette giver dig mulighed for at angive en X-koordinat for nøglen.
Default: null
keyPositionY
Dette giver dig mulighed for at angive en Y-koordinat for nøglen.
Default: null
keyShadow
Dette styrer, om nøglen har en skygge eller ej.
Standard: false
keyShadowOffsetx
Dette styrer X-offset for skyggen.
Standard: 2
keyShadowOffsety
Dette styrer Y-offset for skyggen.
Standard: 2
keyShadowColor
Dette styrer farven på skyggen.
Standard: 2
Standard: 2
keyShadowColor
Dette styrer farven på skyggen.
Standard: #666
keyShadowBlur
Dette styrer den sløring, der anvendes på skyggen.
Default: 3
keyColors
Hvis de beregnede farver ikke er det, du ønsker at se – giver dette dig mulighed for at angive dine egne farver.
Default: null
keyColorShape
Dette er den form, som farveklatten antager.
Default: square (kan være et array af former)
keyBackground
Nøglens baggrund.
Default: white
keyRounded
Hvis hjørnerne på nøglen er firkantede eller afrundede.
Standard: true
keyLinewidth
Den linjebredde, der anvendes til nøglen.
Standard: 1
keyLabelsFont
Den skrifttype, der anvendes til nøgleteksten.
Standard:
keyLabelsSize
Størrelsen af teksten i nøglen.
Standard:
Standard:
keyLabelsColor
Farven på teksten i nøglen.
Default: sort
keyLabelsBold
Hvis teksten i nøglen er fed eller ej.
Standard: false
keyLabelsItalic
Hvis teksten i nøglen er kursiv eller ej.
Standard: false
keyLabelsOffsetx
Den forskydning, der anvendes på X-koordinaten for teksten i nøglen.
Standard: 0
keyLabelsOffsety
Den forskydning, der anvendes på Y-koordinaten for nøgleteksten.
Standard: 0
keyTextAccessible
Som standard er nøgleteksten IKKE tilgængelig, men ved at bruge denne indstilling kan du tilsidesætte dette.
Standard: null
keyInteractive
Hvis nøgleteksten er interaktiv eller ej. Ikke alle diagramtyper understøtter dette.
Default: false
keyInteractiveHighlightChartFill
Fyldfarven, der bruges til at fremhæve diagrammet ved hjælp af den interaktive tast.
Default: rgba(255,255,255,255,0.7)
keyInteractiveHighlightChartStroke
Den farve, der anvendes til at fremhæve diagrammet ved hjælp af den interaktive nøgle.
Standard: sort
Aktive nøgleelementer
Når du holder musen over eller klikker på et nøgleelement/en nøglepost, indeholder RGraph-registret oplysninger om den relevante nøglepost. Så i din hændelseslytter vil du kunne bestemme nøgleelementet på følgende måde:
key = RGraph.Registry.get('key-element');
Og du kan bruge det på denne måde:
// 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); }};
Anvendelse af interaktive nøgler på dine diagrammer
textAccessible, hvis du vil, men den interaktive nøgle vil ignorere den. Tidligere var den interaktive nøgle kun implementeret for linje- og cirkeldiagrammer. Fra midten af 2013 blev den imidlertid omskrevet og er nu tilgængelig med langt flere diagramtyper. Demosiderne for den interaktive nøgle er tilgængelige i downloadarkivet.
Efter at være blevet omskrevet bruger den interaktive nøgle nu tegne-API Rect-objektet Rect og det dynamiske bibliotek:
<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-nøgler
I december 2013 blev der tilføjet en funktion til RGraph, som giver dig mulighed for at bruge en HTML-baseret nøgle ved siden af dit diagram. Denne nøgle består af DIV- og SPAN-tags, så du finder den måske lettere at interagere med. Du kan læse mere om HTML-nøgler på denne side.