Sumário: Documentação sobre o uso de chaves em seus gráficos. As chaves podem ser usadas quando você tem (por exemplo) vários conjuntos de dados que precisam ser identificados. As chaves interativas podem melhorar ainda mais isso
- Introdução
- Propriedades de configuração de chaves
- Elementos de chave ativa
- Usando chaves interativas em seus gráficos
- HTML Keys
Introdução
O uso de uma chave no seu gráfico permite-lhe fornecer informações sobre o que os conjuntos de dados que são exibidos no gráfico representam.
Chaves podem ser usadas em dois modos diferentes – um horizontal projetado para sentar nas margens da carta, e um vertical projetado para sentar sobre a carta.
Propriedades de configuração das chaves
As propriedades das chaves disponíveis e seus padrões são listados abaixo (alguns tipos de gráficos têm padrões ligeiramente diferentes para se adequarem):
Propriedades chave
| Propriedade | Descrição | Padrão |
|---|---|---|
| chave | Uma matriz de elementos chave (este é o texto que é exibido na chave. | (Um array vazio) |
| keyHalign | O alinhamento horizontal da chave | direito |
| keyPosition | O que determina o posicionamento/layout da chave. Os valores possíveis são gráfico e margem. | graph |
| keyPositionMarginBoxed | Quando a chave está em modo de margem isto determina se ela está numa caixa. | false |
| keyPositionGraphBoxed | Quando a chave está em modo gráfico isto determina se ela está numa caixa. | true |
| keyPositionX | Isto permite especificar uma coordenada X para a chave. | nulo |
| keyPositionY | Permite especificar uma coordenada Y para a chave. | nulo |
| keyShadow | Permite controlar se a chave tem ou não uma sombra. | falso |
| keyShadowOffsetx | Controla o deslocamento do X para a sombra. | 2 |
| keyShadowOffsety | Controla o deslocamento do Y para a sombra. | 2 |
| keyShadowColor | Controla a cor da sombra. | #666 |
| keyShadowBlur | Controla o borrão que é aplicado à sombra. | 3 |
| keyColors | Se as cores calculadas não são as que você quer ver – isto permite que você especifique suas próprias cores. | null |
| keyColorShape | Esta é a forma que o blob de cor assume. | quadrado (pode ser uma matriz de formas) |
| keyBackground | O fundo da chave. | branco |
| chaveRounded | Se os cantos da chave são quadrados ou arredondados. | verdadeiro |
| chaveLargura da linha | Largura da linha usada para a chave. | >1 |
| keyLabelsFont | A fonte utilizada para o texto da chave. | |
| keyLabelsSize | O tamanho do texto da chave. | |
| keyLabelsColor | A cor do texto na chave. | Preto |
| keyLabelsBold | Se o texto na chave é negrito ou não. | falso |
| keyLabelsItalic | Se o texto da chave é itálico ou não. | falso |
| keyLabelsOffsetx | O offset que é aplicado à coordenada X do texto da chave. | 0 |
| keyLabelsOffsetx | O offset que se aplica à coordenada Y do texto chave. | 0 |
| keyTextAccessible | Por defeito o texto da chave NÃO É acessível, mas ao usar esta configuração pode substituir esta. | null |
| keyInteractive | Se a chave é interactiva ou não. Nem todos os tipos de gráficos suportam isto. | falso |
| keyInteractiveHighlightChartFill | A cor de preenchimento de destaque utilizada para destacar o gráfico pela chave interactiva. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | A cor do traço de realce usado para destacar o gráfico pela chave interativa. | Preto |
Uma matriz de elementos-chave (este é o texto que é exibido na chave.
Padrão: (Um array vazio)
keyHalign
O alinhamento horizontal da chave
Padrão: direito
Posição da chave
Esta determina o posicionamento/layout da chave. Os valores possíveis são gráfico e margem.
Padrão: gráfico
keyPositionMarginBoxed
Quando a chave está em modo de margem isto determina se ela se encontra numa caixa.
Padrão: falso
keyPositionGraphBoxed
Quando a chave está em modo gráfico isto determina se ela se encontra numa caixa.
Padrão: verdadeiro
keyPositionX
Isto permite especificar uma coordenada X para a chave.
Padrão: null
keyPositionY
Permite especificar uma coordenada Y para a chave.
Padrão: null
keyShadow
Permite controlar se a chave tem ou não uma sombra.
Default: false
keyShadowOffsetx
Esta controla o offset X para a sombra.
Default: 2
keyShadowOffsety
Esta controla o offset Y para a sombra.
Default: 2
keyShadowColor
Esta controla a cor da sombra.
Default: #666
keyShadowBlur
Esta controla o borrão que é aplicado à sombra.
Default: 3
keyColors
Se as cores calculadas não são o que você quer ver – isto permite que você especifique suas próprias cores.
Default: null
keyColorShape
Esta é a forma que o blob da cor assume.
Padrão: quadrado (pode ser um array de formas)
KeyBackground
O fundo da chave.
Padrão: branco
KeyRounded
Se os cantos da chave são quadrados ou arredondados.
Padrão: verdadeiro
Largura da chave
A largura da linha utilizada para a chave.
Padrão: 1
Tipo da chave
Tipo da chave
Tipo da chave utilizado para o texto da chave.
Padrão:
keyLabelsSize
O tamanho do texto na chave.
Padrão:
keyLabelsColor
A cor do texto na chave.
Padrão: preto
keyLabelsBold
Se o texto na chave é negrito ou não.
Padrão: false
keyLabelsItalic
Se o texto na chave é itálico ou não.
Padrão: false
keyLabelsOffsetx
O offset que é aplicado à coordenada X do texto da chave.
Padrão: 0
keyLabelsOffety
O offset que é aplicado à coordenada Y do texto da chave.
Padrão: 0
keyTextAccessible
Por defeito o texto da chave NÃO é acessível, mas ao utilizar esta configuração pode anular esta.
Padrão: null
keyInteractive
Se a chave é interactiva ou não. Nem todos os tipos de gráficos suportam isto.
Padrão: false
keyInteractiveHighlightChartFill
A cor de preenchimento de destaque usada para destacar o gráfico pela chave interativa.
Padrão: rgba(255,255,255,0).7)
keyInteractiveHighlightChartStroke
A cor de preenchimento de realce usada para destacar o gráfico pela chave interactiva.
Padrão: preto
elementos da chave activa
Quando passar o cursor por cima ou clicar num elemento chave/entrada, então o registo RGraph irá guardar os detalhes da entrada da chave relevante. Assim, no seu ouvinte de eventos, poderá determinar a entrada chave desta forma:
key = RGraph.Registry.get('key-element');
E você pode usá-la assim:
// 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 chaves interactivas nos seus gráficos
textAccessible se quiser mas a chave interativa irá ignorá-la. Anteriormente a chave interactiva só era implementada para os gráficos de Linhas e Tortas. A partir de meados de 2013, entretanto, ela foi reescrita e agora está disponível com muito mais tipos de gráficos. As páginas de demonstração para a chave interactiva estão disponíveis no arquivo de download.
Tendo sido reescrita a chave interativa agora usa a API de desenho Rect objeto e a 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>
Chaves HTML
Em Dezembro de 2013 foi adicionada uma função ao RGraph que lhe permite utilizar uma chave baseada em HTML ao lado do seu gráfico. Esta chave é composta por tags DIV e SPAN para que você possa interagir mais facilmente com ela. Você pode ler mais sobre as chaves HTML nesta página.