Resumen: Documentación sobre el uso de claves en sus gráficos. Las claves se pueden utilizar cuando se tienen (por ejemplo) múltiples conjuntos de datos que necesitan ser identificados. Las claves interactivas pueden mejorar esto aún más
- Introducción
- Propiedades de configuración de las claves
- Elementos clave activos
- Usando claves interactivas en sus gráficos
- Claves HTML
Introducción
El uso de una clave en su gráfico le permite proporcionar información sobre lo que representan los conjuntos de datos que se muestran en el gráfico.
Las claves se pueden utilizar en dos modos diferentes – uno horizontal diseñado para sentarse en los márgenes del gráfico, y uno vertical que está diseñado para sentarse sobre el gráfico.
Propiedades de configuración de las teclas
Las propiedades de las teclas disponibles y sus valores predeterminados se enumeran a continuación (algunos tipos de gráficos tienen valores predeterminados ligeramente diferentes para adaptarse):
Propiedades de la clave
| Propiedad | Descripción | Por defecto |
|---|---|---|
| clave | Un array de elementos de la clave (es el texto que se muestra en la clave. | (Una matriz vacía) |
| keyHalign | La alineación horizontal de la clave | right |
| keyPosition | Determina el posicionamiento/disposición de la clave. Los valores posibles son graph y margin. | graph |
| keyPositionMarginBoxed | Cuando la tecla está en modo margin determina si se sitúa en una caja. | false |
| keyPositionGraphBoxed | Cuando la tecla está en modo graph determina si se sitúa en una caja. | true |
| keyPositionX | Esto permite especificar una coordenada X para la tecla. | null |
| keyPositionY | Esto permite especificar una coordenada Y para la tecla. | null |
| keyShadow | Esto controla si la tecla tiene una sombra o no. | false |
| keyShadowOffsetx | Controla el desplazamiento X de la sombra. | 2 |
| keyShadowOffsety | Esto controla el desplazamiento Y para la sombra. | 2 |
| keyShadowColor | Esto controla el color de la sombra. | #666 |
| keyShadowBlur | Controla el desenfoque que se aplica a la sombra. | 3 |
| keyColors | Si los colores calculados no son los que quieres ver – esto te permite especificar tus propios colores. | null |
| keyColorShape | Esta es la forma que toma la mancha de color. | cuadrado (puede ser una matriz de formas) |
| keyBackground | El fondo de la tecla. | blanco |
| keyRounded | Si las esquinas de la tecla son cuadradas o redondeadas. | true |
| keyLinewidth | El ancho de línea utilizado para la tecla. | 1 |
| keyLabelsFont | La fuente utilizada para el texto de la clave. | |
| keyLabelsSize | El tamaño del texto de la clave. | |
| keyLabelsColor | El color del texto de la clave. | black |
| keyLabelsBold | Si el texto de la clave está en negrita o no. | false |
| keyLabelsItalic | Si el texto de la clave es cursiva o no. | false |
| keyLabelsOffsetx | El desplazamiento que se aplica a la coordenada X del texto de la clave. | 0 |
| keyLabelsOffsety | El desplazamiento que se aplica a la coordenada Y del texto clave. | 0 |
| keyTextAccessible | Por defecto, el texto de la tecla NO es accesible, pero utilizando este ajuste puede anularlo. | null |
| keyInteractive | Si la tecla es interactiva o no. No todos los tipos de gráficos lo admiten. | false |
| keyInteractiveHighlightChartFill | El color de relleno de resaltado utilizado para resaltar el gráfico mediante la tecla interactiva. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | El color de trazo de resaltado utilizado para resaltar el gráfico mediante la tecla interactiva. | black |
Una matriz de elementos clave (es el texto que se muestra en la tecla.
Por defecto: (Un array vacío)
keyHalign
La alineación horizontal de la tecla
Por defecto: derecha
keyPosition
Determina el posicionamiento/disposición de la tecla. Los valores posibles son graph y margin.
Por defecto: graph
Posición de la teclaMarginBoxed
Cuando la tecla está en modo margin determina si se sitúa en una caja.
Por defecto: false
Posición de la teclaGraphBoxed
Cuando la tecla está en modo graph determina si se sitúa en una caja.
Por defecto: true
Posición de la teclaX
Le permite especificar una coordenada X para la tecla.
Por defecto: null
keyPositionY
Esto permite especificar una coordenada Y para la tecla.
Por defecto: null
keyShadow
Esto controla si la tecla tiene una sombra o no.
Por defecto: false
keyShadowOffsetx
Controla el desplazamiento X de la sombra.
Por defecto: 2
keyShadowOffsety
Controla el desplazamiento Y de la sombra.
Por defecto: 2
keyShadowColor
Controla el color de la sombra.
Por defecto: #666
keyShadowBlur
Controla el desenfoque que se aplica a la sombra.
Default: 3
keyColors
Si los colores calculados no son los que quiere ver – esto le permite especificar sus propios colores.
Default: null
keyColorShape
Es la forma que toma la mancha de color.
Por defecto: cuadrado (puede ser una matriz de formas)
keyBackground
El fondo de la tecla.
Por defecto: blanco
keyRounded
Si las esquinas de la tecla son cuadradas o redondeadas.
Por defecto: true
keyLinewidth
El ancho de línea utilizado para la tecla.
Por defecto: 1
keyLabelsFont
La fuente utilizada para el texto de la tecla.
Por defecto:
keyLabelsSize
El tamaño del texto de la llave.
Por defecto:
keyLabelsColor
El color del texto de la tecla.
Por defecto: negro
keyLabelsBold
Si el texto de la tecla está en negrita o no.
Predeterminado: false
keyLabelsItalic
Si el texto de la tecla está en cursiva o no.
Predeterminado: false
keyLabelsOffsetx
El desplazamiento que se aplica a la coordenada X del texto de la tecla.
Por defecto: 0
keyLabelsOffsety
El desplazamiento que se aplica a la coordenada Y del texto clave.
Por defecto: 0
keyTextAccessible
Por defecto, el texto clave NO es accesible, pero utilizando este ajuste se puede anular.
Por defecto: null
keyInteractive
Si la clave es interactiva o no. No todos los tipos de gráficos lo admiten.
Default: false
keyInteractiveHighlightChartFill
El color de relleno de resaltado utilizado para resaltar el gráfico mediante la tecla interactiva.
Default: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
El color del trazo de resaltado utilizado para resaltar el gráfico mediante la tecla interactiva.
Por defecto: negro
Elementos clave activos
Cuando se pasa el ratón por encima o se hace clic en un elemento/entrada clave, el registro de RGraph contendrá los detalles de la entrada clave correspondiente. Así que en su oyente de eventos será capaz de determinar la entrada clave así:
key = RGraph.Registry.get('key-element');
Y podrías usarlo así:
// 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); }};
Usar teclas interactivas en sus gráficos
textAccessible si lo desea, pero la tecla interactiva lo ignorará. Anteriormente, la clave interactiva sólo se implementó para los gráficos de líneas y de tarta. Sin embargo, a mediados de 2013 se reescribió y ahora está disponible con muchos más tipos de gráficos. Las páginas de demostración de la tecla interactiva están disponibles en el archivo de descargas.
Al haber sido reescrita la llave interactiva ahora utiliza el objeto API de dibujo Rect y la biblioteca dinámica:
<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>
Claves HTML
En diciembre de 2013 se añadió una función a RGraph que permite utilizar una clave basada en HTML junto a su gráfico. Esta clave se compone de etiquetas DIV y SPAN, por lo que puede resultar más fácil interactuar con ella. Puedes leer más sobre las llaves HTML en esta página.