Sommario: Documentazione sull’uso delle chiavi nei tuoi grafici. Le chiavi possono essere usate quando hai (per esempio) più serie di dati che devono essere identificati. Le chiavi interattive possono migliorare ulteriormente questo aspetto
- Introduzione
- Proprietà di configurazione delle chiavi
- Elementi chiave attivi
- Utilizzo delle chiavi interattive nei tuoi grafici
- Chiavi HTML
Introduzione
Usare una chiave sul tuo grafico ti permette di fornire informazioni su cosa rappresentano gli insiemi di dati che sono visualizzati sul grafico.
Le chiavi possono essere usate in due modi diversi – una orizzontale progettata per stare nei margini del grafico, e una verticale progettata per stare sopra il grafico.
Proprietà di configurazione dei tasti
Le proprietà dei tasti disponibili e i loro valori predefiniti sono elencati di seguito (alcuni tipi di grafico hanno valori predefiniti leggermente diversi):
Proprietà della chiave
| Proprietà | Descrizione | Default |
|---|---|---|
| chiave | Un array di elementi chiave (questo è il testo che viene visualizzato nella chiave. | (Un array vuoto) |
| keyHalign | L’allineamento orizzontale della chiave | destra |
| keyPosition | Questo determina il posizionamento/layout della chiave. I valori possibili sono graph e margin. | graph |
| keyPositionMarginBoxed | Quando la chiave è in modalità margin, questo determina se si trova in una scatola. | false |
| keyPositionGraphBoxed | Quando la chiave è in modalità graph, questo determina se si trova in una scatola. | true |
| keyPositionX | Questo permette di specificare una coordinata X per la chiave. | null |
| keyPositionY | Consente di specificare una coordinata Y per la chiave. | null |
| keyShadow | Questo controlla se la chiave ha un’ombra o no. | false |
| keyShadowOffsetx | Controlla l’offset X dell’ombra. | 2 |
| keyShadowOffsety | Questo controlla l’offset Y per l’ombra. | 2 |
| keyShadowColor | Questo controlla il colore dell’ombra. | #666 |
| keyShadowBlur | Controlla la sfocatura applicata all’ombra. | 3 |
| keyColors | Se i colori calcolati non sono quelli che vuoi vedere – questo ti permette di specificare i tuoi colori. | null |
| keyColorShape | Questa è la forma che assume il blob di colore. | quadrato (può essere un array di forme) |
| keyBackground | Lo sfondo della chiave. | bianco |
| keyRounded | Se gli angoli della chiave sono quadrati o arrotondati. | vero |
| keyLinewidth | La larghezza di linea usata per la chiave. | 1 |
| keyLabelsFont | Il carattere usato per il testo della chiave. | |
| keyLabelsSize | La dimensione del testo nella chiave. | |
| keyLabelsColor | Il colore del testo nella chiave. | black |
| keyLabelsBold | Se il testo nella chiave è in grassetto o no. | falso |
| keyLabelsItalic | Se il testo nella chiave è in corsivo o no. | falso |
| keyLabelsOffsetx | L’offset che viene applicato alle coordinate X del testo della chiave. | 0 |
| keyLabelsOffsety | L’offset che viene applicato alla coordinata Y del testo chiave. | 0 |
| keyTextAccessible | Di default il testo della chiave NON è accessibile ma usando questa impostazione puoi sovrascriverlo. | null |
| keyInteractive | Se la chiave è interattiva o no. Non tutti i tipi di grafico lo supportano. | false |
| keyInteractiveHighlightChartFill | Il colore di riempimento utilizzato per evidenziare il grafico dal tasto interattivo. | rgba(255,255,255,0..7) |
| keyInteractiveHighlightChartStroke | Il colore del tratto di evidenziazione usato per evidenziare il grafico con il tasto interattivo. | nero |
Un array di elementi chiave (questo è il testo che viene visualizzato nella chiave.
Di default: (Un array vuoto)
keyHalign
L’allineamento orizzontale della chiave
Default: right
keyPosition
Questo determina il posizionamento/layout della chiave. I valori possibili sono graph e margin.
Default: graph
keyPositionMarginBoxed
Quando la chiave è in modalità margin determina se si trova in un box.
Default: false
keyPositionGraphBoxed
Quando la chiave è in modalità graph determina se si trova in un box.
Default: true
keyPositionX
Questo ti permette di specificare una coordinata X per la chiave.
Default: null
keyPositionY
Consente di specificare una coordinata Y per il tasto.
Default: null
keyShadow
Controlla se il tasto ha un’ombra o no.
Default: false
keyShadowOffsetx
Questo controlla lo spostamento X per l’ombra.
Default: 2
keyShadowOffsety
Questo controlla lo spostamento Y per l’ombra.
Default: 2
keyShadowColor
Questo controlla il colore dell’ombra.
Default: #666
keyShadowBlur
Questo controlla la sfocatura applicata all’ombra.
Default: 3
keyColors
Se i colori calcolati non sono quelli che vuoi vedere – questo ti permette di specificare i tuoi colori.
Default: null
keyColorShape
Questa è la forma che il blob di colore assume.
Default: square (può essere un array di forme)
keyBackground
Lo sfondo della chiave.
Default: white
keyRounded
Se gli angoli della chiave sono quadrati o arrotondati.
Default: true
keyLinewidth
La larghezza di linea usata per la chiave.
Default: 1
keyLabelsFont
Il font usato per il testo della chiave.
Default:
keyLabelsSize
La dimensione del testo nella chiave.
Default:
keyLabelsColor
Il colore del testo nella chiave.
Default: black
keyLabelsBold
Se il testo nella chiave è in grassetto o no.
Default: false
keyLabelsItalic
Se il testo nella chiave è in corsivo o no.
Default: false
keyLabelsOffsetx
L’offset che viene applicato alla coordinata X del testo della chiave.
Default: 0
keyLabelsOffsety
L’offset che viene applicato alla coordinata Y del testo della chiave.
Default: 0
keyTextAccessible
Di default il testo della chiave NON è accessibile ma usando questa impostazione puoi sovrascriverlo.
Default: null
keyInteractive
Se la chiave è interattiva o no. Non tutti i tipi di grafico lo supportano.
Default: false
keyInteractiveHighlightChartFill
Il colore di riempimento utilizzato per evidenziare il grafico con il tasto interattivo.
Default: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
Il colore del tratto di evidenziazione usato per evidenziare il grafico con il tasto interattivo.
Default: black
Elementi chiave attivi
Quando passate sopra o cliccate su un elemento/voce chiave, il registro RGraph conterrà i dettagli della voce chiave pertinente. Quindi nel tuo listener di eventi sarai in grado di determinare la voce chiave in questo modo:
key = RGraph.Registry.get('key-element');
E potreste usarlo in questo modo:
// 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); }};
Utilizzare le chiavi interattive sui tuoi grafici
textAccessible se vuoi, ma il tasto interattivo lo ignorerà. Prima il tasto interattivo era implementato solo per i grafici a linee e a torta. A partire dalla metà del 2013, tuttavia, è stato riscritto ed è ora disponibile con molti altri tipi di grafici. Le pagine dimostrative per la chiave interattiva sono disponibili nell’archivio dei download.
Essendo stata riscritta, la chiave interattiva ora usa l’oggetto drawing API Rect e la libreria dinamica:
<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>
Tastiere HTML
Nel dicembre 2013 è stata aggiunta una funzione a RGraph che ti permette di usare una chiave basata su HTML accanto al tuo grafico. Questa chiave è composta da tag DIV e SPAN, quindi potresti trovarla più facile da usare. Puoi leggere di più sulle chiavi HTML in questa pagina.