Samenvatting: Documentatie over het gebruik van sleutels in uw grafieken. Sleutels kunnen worden gebruikt wanneer u (bijvoorbeeld) meerdere reeksen gegevens hebt die moeten worden geïdentificeerd. Interactieve sleutels kunnen dit verder verbeteren
- Inleiding
- Sleutelconfiguratie-eigenschappen
- Actieve sleutelelementen
- Het gebruik van interactieve sleutels in uw grafieken
- HTML Sleutels
Inleiding
Door een sleutel op uw grafiek te gebruiken, kunt u informatie geven over wat de datasets die op de grafiek worden weergegeven, vertegenwoordigen.
Toetsen kunnen op twee verschillende manieren worden gebruikt: horizontaal in de marge van de grafiek en verticaal boven de grafiek.
Eigenschappen van de toetsconfiguratie
De beschikbare eigenschappen van de toetsen en hun standaardinstellingen staan hieronder opgesomd (sommige kaarttypen hebben iets andere standaardinstellingen):
Sleuteleigenschappen
| Eigenschap | Beschrijving | Voorkeur |
|---|---|---|
| sleutel | Een array van sleutelelementen (dit is de tekst die in de sleutel wordt weergegeven. | (Een lege array) |
| keyHalign | De horizontale uitlijning van de toets | rechts |
| keyPosition | Dit bepaalt de positionering/lay-out van de toets. Mogelijke waarden zijn graph en margin. | graph |
| keyPositionMarginBoxed | Wanneer de toets in margin mode staat bepaalt dit of deze in een box zit. | false |
| keyPositionGraphBoxed | Wanneer de toets in graph mode staat bepaalt dit of deze in een box zit. | true |
| keyPositionX | Hiermee kunt u een X-coördinaat voor de toets opgeven. | null |
| keyPositionY | Hiermee kunt u een Y-coördinaat voor de toets opgeven. | null |
| keyShadow | Hiermee bepaalt u of de toets een schaduw heeft of niet. | false |
| keyShadowOffsetx | Hiermee bepaalt u de X-offset voor de schaduw. | 2 |
| keyShadowOffsety | Dit bepaalt de Y-offset voor de schaduw. | 2 |
| keyShadowColor | Dit bepaalt de kleur van de schaduw. | #666 |
| keyShadowBlur | Hiermee bepaalt u de onscherpte die op de schaduw wordt toegepast. | 3 |
| keyColors | Als de berekende kleuren niet zijn wat u wilt zien – hiermee kunt u uw eigen kleuren opgeven. | null |
| keyColorShape | Dit is de vorm die de kleur blob aanneemt. | vierkant (kan een array van vormen zijn) |
| keyBackground | De achtergrond van de toets. | wit |
| keyRounded | Hoewel de hoeken van de toets vierkant of afgerond zijn. | true |
| keyLinewidth | De lijndikte die voor de toets wordt gebruikt. | 1 |
| keyLabelsFont | Het lettertype dat voor de sleuteltekst wordt gebruikt. | |
| keyLabelsSize | De grootte van de tekst in de legenda. | |
| keyLabelsColor | De kleur van de tekst in de toets. | black |
| keyLabelsBold | Hoewel de tekst in de toets vet is of niet. | false |
| keyLabelsItalic | Wanneer de tekst in de toets cursief is of niet. | false |
| keyLabelsOffsetx | De offset die wordt toegepast op de X-coördinaat van de sleuteltekst. | 0 |
| keyLabelsOffsety | De offset die wordt toegepast op de Y-coördinaat van de sleuteltekst. | 0 |
| keyTextAccessible | De standaardtekst IS NIET toegankelijk, maar met deze instelling kunt u dit opheffen. | null |
| keyInteractive | Hoewel de toets interactief is of niet. Niet alle grafiektypen ondersteunen dit. | false |
| keyInteractiveHighlightChartFill | De vulkleur van de markering die wordt gebruikt om de grafiek te markeren met de interactieve toets. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | De kleur van de accentueringsstreep die wordt gebruikt om de grafiek met de interactieve toets te accentueren. | black |
Een array van sleutelelementen (dit is de tekst die in de key wordt weergegeven.
Voorkeur: (Een lege array)
keyHalign
De horizontale uitlijning van de toets
Voorkeur: rechts
keyPosition
Dit bepaalt de positionering/lay-out van de toets. Mogelijke waarden zijn grafiek en marge.
Voorkeur: grafiek
ToetsPositieMarginBoxed
Wanneer de toets in marge-modus staat, bepaalt dit of hij in een kader staat.
Voorkeur: false
ToetsPositieGrafiekBoxed
Wanneer de toets in grafiek-modus staat, bepaalt dit of hij in een kader staat.
Voorkeur: true
ToetsPositieX
Hiermee kunt u een X-coördinaat voor de toets opgeven.
Voorkeur: null
keyPositionY
Hiermee kunt u een Y-coördinaat voor de toets opgeven.
Voorkeur: null
keyShadow
Hiermee bepaalt u of de toets een schaduw heeft of niet.
Voorkeur: false
keyShadowOffsetx
Dit bepaalt de X-offset voor de schaduw.
Voorkeur: 2
keyShadowOffsety
Dit bepaalt de Y-offset voor de schaduw.
Voorkeur: 2
keyShadowColor
Dit bepaalt de kleur van de schaduw.
Voorkeur: #666
keyShadowBlur
Dit regelt de onscherpte die op de schaduw wordt toegepast.
Default: 3
keyColors
Als de berekende kleuren niet zijn wat u wilt zien – hiermee kunt u uw eigen kleuren opgeven.
Default: null
keyColorShape
Dit is de vorm die de kleurenwolb aanneemt.
Voorkeur: vierkant (kan een array van vormen zijn)
keyBackground
De achtergrond van de toets.
Voorkeur: wit
keyRounded
Hoewel de hoeken van de toets vierkant of afgerond zijn.
Voorkeur: true
keyLinewidth
De gebruikte lijndikte voor de toets.
Voorkeur: 1
keyLabelsFont
Het gebruikte lettertype voor de toetstekst.
Voorkeur:
keyLabelsSize
De grootte van de tekst in de sleutel.
Default:
keyLabelsColor
De kleur van de tekst in de legenda.
Voorkeur: zwart
keyLabelsBold
Als de tekst in de legenda vet is of niet.
Voorkeur: false
keyLabelsItalic
Als de tekst in de toets al dan niet cursief is.
Voorkeur: false
keyLabelsOffsetx
De offset die wordt toegepast op de X-coördinaat van de sleuteltekst.
Standaard: 0
keyLabelsOffsety
De offset die op de Y-coördinaat van de sleuteltekst wordt toegepast.
Standaard: 0
keyTextAccessible
De standaardtekst IS NIET toegankelijk, maar met deze instelling kunt u dit opheffen.
Standaard: null
keyInteractive
Als de toets interactief is of niet. Niet alle grafiektypen ondersteunen dit.
Voorkeur: false
keyInteractiveHighlightChartFill
De vulkleur die wordt gebruikt om de grafiek te markeren met de interactieve toets.
Voorkeur: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
De kleur van de accentueringsstreep die wordt gebruikt om de grafiek te accentueren met de interactieve toets.
Standaard: zwart
Actieve sleutelelementen
Wanneer u met de muis over een sleutelelement/entry gaat of erop klikt, bevat het RGraph-register de details van het relevante sleutelitem. Dus in je event listener kun je de sleutel-entry als volgt bepalen:
key = RGraph.Registry.get('key-element');
En je zou het als volgt kunnen gebruiken:
// 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); }};
Interactieve toetsen gebruiken op uw grafieken
textAccessible aanzetten als u dat wilt, maar de interactieve toets zal het negeren. Voorheen was de interactieve toets alleen geïmplementeerd voor de lijn- en cirkeldiagrammen. Vanaf medio 2013 is hij echter herschreven en is nu beschikbaar voor veel meer grafiektypen. De demo-pagina’s voor de interactieve toets zijn beschikbaar in het download-archief.
De interactieve sleutel is herschreven en gebruikt nu het teken-API Rect object en de dynamische bibliotheek:
<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 sleutels
In december 2013 werd een functie toegevoegd aan RGraph waarmee u een HTML gebaseerde sleutel naast uw grafiek kunt gebruiken. Deze sleutel is opgebouwd uit DIV en SPAN tags zodat U er misschien gemakkelijker mee kunt werken. U kunt meer lezen over HTML-sleutels op deze pagina.