Summary : Documentation sur l’utilisation de clés dans vos graphiques. Les clés peuvent être utilisées lorsque vous avez (par exemple) plusieurs ensembles de données qui doivent être identifiés. Les clés interactives peuvent encore améliorer cela
- Introduction
- Propriétés de configuration des clés
- Éléments de clés actives
- Utilisation des clés interactives sur vos graphiques
- Clé HTML
.
Introduction
L’utilisation d’une clé sur votre graphique vous permet de fournir des informations sur ce que représentent les ensembles de données qui sont affichés sur le graphique.
Les clés peuvent être utilisées dans deux modes différents – une horizontale conçue pour se situer dans les marges du graphique, et une verticale qui est conçue pour se situer au-dessus du graphique.
Propriétés de configuration des touches
Les propriétés des touches disponibles et leurs valeurs par défaut sont listées ci-dessous(certains types de graphiques ont des valeurs par défaut légèrement différentes pour s’adapter) :
Propriétés des clés
| Propriété | Description | Défaut |
|---|---|---|
| clé | Un tableau d’éléments de clé (c’est le texte qui est affiché dans la clé. | (Un tableau vide) |
| keyHalign | L’alignement horizontal de la clé | droite |
| keyPosition | Cela détermine le positionnement/la disposition de la clé. Les valeurs possibles sont graphique et marge. | graph |
| keyPositionMarginBoxed | Lorsque la clé est en mode marge, cela détermine si elle se trouve dans une boîte. | false |
| keyPositionGraphBoxed | Lorsque la clé est en mode graphique, cela détermine si elle se trouve dans une boîte. | true |
| keyPositionX | Cela vous permet de spécifier une coordonnée X pour la clé. | null |
| keyPositionY | Cela vous permet de spécifier une coordonnée Y pour la clé. | null |
| keyShadow | Cela contrôle si la clé a une ombre ou non. | false |
| keyShadowOffsetx | Cela contrôle le décalage X pour l’ombre. | 2 |
| keyShadowOffsety | Cela contrôle le décalage Y pour l’ombre. | 2 |
| keyShadowColor | Cela contrôle la couleur de l’ombre. | #666 |
| keyShadowBlur | Ceci contrôle le flou qui est appliqué à l’ombre. | 3 |
| keyColors | Si les couleurs calculées ne sont pas celles que vous voulez voir – ceci vous permet de spécifier vos propres couleurs. | null |
| keyColorShape | C’est la forme que prend le blob de couleur. | carré (peut être un tableau de formes) |
| keyBackground | Le fond de la touche. | blanc |
| keyRounded | Si les coins de la clé sont carrés ou arrondis. | true |
| keyLinewidth | La largeur de ligne utilisée pour la clé. | 1 |
| keyLabelsFont | La police utilisée pour le texte de la clé. | |
| keyLabelsSize | La taille du texte de la clé. | |
| keyLabelsColor | La couleur du texte dans la clé. | noir |
| keyLabelsBold | Si le texte dans la clé est gras ou non. | false |
| keyLabelsItalic | Si le texte de la clé est en italique ou non. | false |
| keyLabelsOffsetx | Le décalage qui est appliqué à la coordonnée X du texte de la clé. | 0 |
| keyLabelsOffsety | Le décalage qui est appliqué à la coordonnée Y au texte clé. | 0 |
| keyTextAccessible | Par défaut, le texte de la clé N’EST PAS accessible mais en utilisant ce paramètre, vous pouvez le remplacer. | null |
| keyInteractive | Si la clé est interactive ou non. Tous les types de graphiques ne le supportent pas. | false |
| keyInteractiveHighlightChartFill | Couleur de remplissage de surbrillance utilisée pour mettre en évidence le graphique par la touche interactive. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | Couleur du trait de surbrillance utilisé pour mettre en évidence le graphique par la touche interactive. | noir |
Un tableau d’éléments de clé (c’est le texte qui est affiché dans la clé.
Défaut : (Un tableau vide)
keyHalign
L’alignement horizontal de la clé
Default : right
keyPosition
Cela détermine le positionnement/la disposition de la clé. Les valeurs possibles sont graph et margin.
Default : graph
keyPositionMarginBoxed
Lorsque la clé est en mode margin, cela détermine si elle se trouve dans une boîte.
Default : false
keyPositionGraphBoxed
Lorsque la clé est en mode graph, cela détermine si elle se trouve dans une boîte.
Default : true
keyPositionX
Cela vous permet de spécifier une coordonnée X pour la clé.
Default : null
keyPositionY
Cela vous permet de spécifier une coordonnée Y pour la clé.
Default : null
keyShadow
Cela contrôle si la clé a une ombre ou non.
Default : false
keyShadowOffsetx
Ceci contrôle le décalage X pour l’ombre.
Default : 2
keyShadowOffsety
Ceci contrôle le décalage Y pour l’ombre.
Default : 2
keyShadowColor
Ceci contrôle la couleur de l’ombre.
Default : #666
keyShadowBlur
Ceci contrôle le flou qui est appliqué à l’ombre.
Default : 3
keyColors
Si les couleurs calculées ne correspondent pas à ce que vous voulez voir – cela vous permet de spécifier vos propres couleurs.
Default : null
keyColorShape
C’est la forme que prend le blob de couleur.
Default : square (peut être un tableau de formes)
keyBackground
Le fond de la clé.
Default : white
keyRounded
Selon que les coins de la clé sont carrés ou arrondis.
Défaut : true
keyLinewidth
La largeur de ligne utilisée pour la clé.
Défaut : 1
keyLabelsFont
La police utilisée pour le texte de la clé.
Défaut :
keyLabelsSize
La taille du texte de la clé.
Default :
keyLabelsColor
La couleur du texte de la clé.
Default : black
keyLabelsBold
Selon que le texte de la clé est en gras ou non.
Default : false
keyLabelsItalic
Que le texte de la clé soit en italique ou non.
Default : false
keyLabelsOffsetx
Le décalage qui est appliqué à la coordonnée X au texte de la clé.
Default : 0
keyLabelsOffsety
Le décalage qui est appliqué à la coordonnée Y au texte de la clé.
Default : 0
keyTextAccessible
Par défaut, le texte de la clé N’EST PAS accessible mais en utilisant ce paramètre, vous pouvez le remplacer.
Default : null
keyInteractive
Si la clé est interactive ou non. Tous les types de graphiques ne supportent pas cela.
Default : false
keyInteractiveHighlightChartFill
La couleur de remplissage de surbrillance utilisée pour mettre en évidence le graphique par la touche interactive.
Default : rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
Couleur du trait de surbrillance utilisé pour mettre en évidence le graphique par la touche interactive.
Default : black
Eléments clés actifs
Lorsque vous survolez ou cliquez sur un élément/entrée clé alors le registre RGraph contiendra les détails de l’entrée clé correspondante. Ainsi, dans votre écouteur d’événements, vous serez en mesure de déterminer l’entrée de clé comme ceci :
key = RGraph.Registry.get('key-element');
Et vous pourriez l’utiliser comme ceci :
// 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); }};
Utilisation de clés interactives sur vos graphiques
textAccessible si vous le souhaitez mais la clé interactive l’ignorera. Auparavant, la clé interactive n’était implémentée que pour les graphiques en ligne et en secteurs. Depuis la mi-2013, cependant, elle a été réécrite et est maintenant disponible avec beaucoup plus de types de graphiques. Les pages de démonstration de la clé interactive sont disponibles dans l’archive de téléchargement.
Ayant été réécrite, la clé interactive utilise maintenant l’objet API de dessin Rect et la bibliothèque dynamique :
<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>
Touches HTML
En décembre 2013, une fonction a été ajoutée à RGraph qui vous permet d’utiliser une clé basée sur HTML à côté de votre graphique. Cette clé est composée de balises DIV et SPAN, vous pouvez donc la trouver plus facile à interagir. Vous pouvez en savoir plus sur les clés HTML sur cette page.