Questa pagina descrive il concetto e l'utilizzo dei ruoli nelle tabelle di dati dei grafici.
- Cosa sono i ruoli?
- Quali ruoli sono disponibili?
- Gerarchia dei ruoli e associatività
- Assegnazione di un ruolo
Cosa sono i ruoli?
Gli oggetti Google DataTable e DataView ora supportano i ruoli colonna assegnati esplicitamente. Un ruolo colonna descrive lo scopo dei dati nella colonna: ad esempio, una colonna potrebbe contenere dati che descrivono il testo della descrizione comando, le annotazioni dei punti dati o gli indicatori di incertezza. La maggior parte dei ruoli delle colonne si applica alla colonna "dati" che la precede, sia immediatamente prima o immediatamente prima della prima di un gruppo consecutivo di colonne di ruolo. Ad esempio, potresti avere due colonne che seguono una colonna "dati", una per "descrizione comando" e una per "annotazione". Tuttavia, dopo la colonna "Dominio", in genere sono consentiti anche i ruoli delle colonne "annotation" e "annotationText".
Nota: se vuoi controllare il contenuto delle descrizioni comando che vengono visualizzate quando l'utente passa il mouse sopra un grafico, consulta Descrizione comando.
In origine, erano disponibili solo due ruoli per una colonna: "dominio", che specifica i valori dell'asse principale, e "dati", che specifica l'altezza delle barre, la larghezza delle sezioni del grafico a torta e così via. Questi ruoli sono stati assegnati in modo implicito, in base all'ordine e al tipo di colonne della tabella. Tuttavia, grazie alla possibilità di assegnare esplicitamente i ruoli delle colonne, ora puoi aggiungere colonne facoltative che forniscono nuove e interessanti funzionalità a un grafico, come etichette di annotazione arbitrarie, testo al passaggio del mouse e barre di incertezza.
Se non assegni esplicitamente il ruolo di una colonna, questo ruolo viene dedotto dall'ordine della colonna nella tabella, in base alla specifica del formato dei dati del grafico. Questa pagina mostra quali ruoli puoi assegnare esplicitamente e come assegnarli.
Ecco un confronto di ciò che puoi fare con un grafico a linee, utilizzando solo i ruoli predefiniti e dedotti, rispetto ad altri ruoli assegnati esplicitamente.
Formato della tabella di dati del grafico a linee:
| Colonna 0 | Colonna 1 | ... | Colonna N | |
|---|---|---|---|---|
| Finalità | Valori riga 1 | ... | Valori della riga N | |
| Tipo di dati | numero | ... | numero | |
| Ruolo | dominio | dati | ... | dati |
| Ruoli delle colonne supportati facoltativi |
|
|
... |
|
| Grafico senza ruoli nelle colonne espliciti | Grafico con ruoli nelle colonne espliciti |
|---|---|
|
|
|
Questo grafico non applica i ruoli in modo esplicito, quindi può utilizzare solo il layout delle colonne dei dati di base e del dominio mostrato sopra. Tabella di dati: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
Questo grafico assegna ruoli in modo esplicito, pertanto è possibile aggiungere colonne facoltative. Questo grafico contiene colonne facoltative per i ruoli di annotazione, testo, intervallo e certezza.
Tabella di dati: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
Quali ruoli sono disponibili?
La tabella seguente elenca tutti i ruoli supportati da Google Grafici. Non tutti i ruoli sono supportati da tutti i tipi di grafici. La documentazione di ogni grafico descrive i ruoli disponibili e la posizione in cui si trovano. Il rendering dei ruoli viene eseguito in modo diverso a seconda del tipo di grafico.
| Ruolo | Descrizione | Esempio |
|---|---|---|
| annotazione | Testo da visualizzare sul grafico vicino al punto dati associato. Il testo viene visualizzato senza alcuna interazione da parte dell'utente. Le annotazioni e il testo delle annotazioni possono essere assegnati sia a punti dati che a categorie (etichette dell'asse). Esistono due stili di annotazioni: punto (predefinito), che traccia il testo dell'annotazione vicino al punto specificato, e linea, che traccia il testo dell'annotazione su una linea che divide in due l'area del grafico. Puoi specificare lo stile della linea impostando questa opzione di grafico: Tipo di dati: stringa Predefinito: stringa vuota |
Dati: label: 'Year', 'Sales', null, null, 'Expenses', null, null
role: domain, data,authenticate, writeText, data, include, notevoleText
'2004', 1000, null, null, 400, null, null
'2005', 1170
La lettera "A" e la "B" di questo grafico sono annotazioni. Passa il mouse sopra l'annotazione per visualizzarne il testo. Tieni presente che devi passare il mouse sopra l'annotazione, non sul punto dati a cui è applicata, per visualizzare il valore markText. I valori null sono accettati sia per le celle annotazioni che per annotazioniText; tuttavia, se è presente un valore di annotazione, devi avere un valore di annotazione associato. |
| annotationText | Testo esteso da visualizzare quando l'utente passa il mouse sopra l'annotazione associata. Le annotazioni e il testo delle annotazioni possono essere assegnati sia a punti dati sia a categorie (etichette dell'asse). Se hai una colonna markText, devi avere anche una colonna di annotazione. Al contrario, il testo della descrizione comando viene visualizzato quando l'utente passa il mouse sopra il punto dati associato sul grafico. Tipo di dati: stringa Predefinito: stringa vuota |
|
| certezza | Indica se un punto dati è certo o meno. Il modo in cui viene visualizzato dipende dal tipo di grafico, ad esempio potrebbe essere indicato da linee tratteggiate o riempimento a strisce. Per i grafici a linee e ad area, il segmento tra due punti dati è certo solo se entrambi i punti dati sono certi. Tipo di dati: booleano, dove vero è certo, falso è incerto. Valore predefinito: true |
|
| enfasi | Enfatizza i punti dati del grafico specificati. Visualizzato come una linea spessa e/o un punto grande. Per i grafici a linee e ad area, il segmento tra due punti dati viene enfatizzato solo se entrambi i punti dati sono enfatizzati. Tipo di dati: booleano Predefinito: falso |
Dati: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
In questo grafico, la serie "Vendite" ha un segmento in evidenza, indicato dalla colonna tre, dalle righe uno e due. La serie "Spese" è composta da due segmenti in evidenza, indicati dalla quinta colonna, con le righe due, tre e quattro. Nota come l'enfasi richiede che entrambi i punti di delimitazione siano enfatizzati. |
| intervallo | Indica l'intervallo di dati potenziale per un punto specifico. Gli intervalli sono in genere visualizzati come indicatori di intervallo di stile I-bar. Le colonne degli intervalli sono colonne numeriche; aggiungi le colonne degli intervalli in coppie, contrassegnando il valore basso e alto della barra. I valori dell'intervallo devono essere aggiunti in valore crescente, da sinistra a destra. Tipo di dati: numero Predefinito: nessun intervallo |
Dati: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
In questo grafico, i valori dell'intervallo definiscono una I-bar attorno ai punti. I valori aumentano da sinistra a destra. Gli intervalli più alti e più bassi intorno a un punto segnano la parte superiore e inferiore della barra. Nota: per tutti i dettagli sugli intervalli, consulta Intervalli. |
| ambito | Indica se un punto rientra o meno nell'ambito. Se un punto non rientra nell'ambito, viene visivamente svalutato. Per i grafici a linee e ad area, il segmento tra due punti dati è incluso nell'ambito se è incluso uno degli endpoint. Tipo di dati: booleano, dove true indica che l'ambito è definito. Valore predefinito: true |
Dati: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
La prima colonna di ambito si applica alla colonna di dati "Vendite" alla sua sinistra. Il primo segmento è stato reso fuori ambito perché entrambi i punti di confine sono fuori ambito. La seconda colonna relativa all'ambito si applica alla colonna di dati "Spese" a sinistra. Il primo segmento è contrassegnato come nell'ambito perché uno dei suoi punti di confine rientra nell'ambito; il resto della linea è fuori ambito perché tutti gli altri punti sono contrassegnati come fuori ambito. |
| stile |
Applica stili a determinate proprietà di aspetti diversi dei dati. Tali valori sono:
Tipo di dati: stringa, dove è possibile applicare più stili utilizzando una
sintassi Predefinito: nullo |
Dati:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
In questo grafico, lo stile di ogni barra è indipendente dagli altri mediante il ruolo colonna Nota: ulteriori dettagli su come personalizzare lo stile di punti, linee e barre sono documentati altrove. Vedi anche le opzioni per ogni tipo di grafico in cui è possibile specificare stili per altri tipi di entità, come aree, testo e caselle. |
| descrizione comando |
Testo da visualizzare quando l'utente passa il mouse sopra il punto dati associato a questa riga. Nota: questa operazione non è supportata dalla visualizzazione Grafico a bolle. I contenuti delle descrizioni comando HTML dei grafici a bolle non sono personalizzabili. Tipo di dati: stringa Predefinito: valore in punti dati |
Dati: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
Passa il mouse sopra i punti dati per visualizzare il testo della descrizione comando. I dati della descrizione comando vengono assegnati a tutti i punti di entrambe le linee, nelle colonne 3 e 5. Nota: per maggiori dettagli sulla personalizzazione delle descrizioni comando, consulta Descrizione comando. |
| dominio | Non è necessario assegnare questo ruolo in modo esplicito, a meno che non si progetta un grafico multidominio (mostrato qui). Il formato di base della tabella di dati consente al motore di grafici di dedurre quali colonne sono colonne di dominio. Tuttavia, devi sapere quali sono le colonne di dominio, in modo da sapere quali altre colonne possono modificarle. Le colonne Dominio specificano le etichette lungo l'asse principale del grafico. A volte è possibile utilizzare più colonne di domini per supportare più scale all'interno dello stesso grafico. Tipo di dati: in genere è una stringa, ma occasionalmente numero o data |
Dati:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
Questo esempio mostra un grafico multidominio. Le prime due colonne di dati modificano il primo dominio ("trimestre 2009") e le ultime due colonne di dati modificano il secondo dominio ("trimestre 2008"). Entrambi i domini sono sovrapposti alle scale sullo stesso asse. |
| dati | Non è necessario assegnare questo ruolo in modo esplicito; il formato di base della tabella di dati consente al motore di grafici di dedurre quali colonne sono colonne del dominio. Tuttavia, devi sapere quali colonne sono colonne di dati, in modo da sapere quali altre colonne possono modificarle. Le colonne relative ai ruoli dei dati specificano i dati della serie da visualizzare nel grafico. Nella maggior parte dei grafici, una colonna corrisponde a una serie, ma può variare in base al tipo di grafico (ad esempio, i grafici a dispersione richiedono due colonne di dati per la prima serie e un'altra per ogni serie aggiuntiva; i grafici a candele richiedono quattro colonne di dati per ogni serie). Tipo di dati: numero |
Gerarchia dei ruoli e associatività
Il seguente diagramma mostra quali colonne dei ruoli possono essere applicate a quali altre colonne dei ruoli. Tutte le colonne tranne le colonne di dominio si applicano al vicino più vicino a sinistra a cui può essere applicata.
Quindi, ad esempio, una colonna scope si applica alla colonna data più vicina a sinistra; una colonna annotationText verrà applicata alla colonna annotation più vicina alla sua sinistra; un'annotazione verrà applicata alla colonna data o dominio più vicina a sinistra.
Assegnare un ruolo
I ruoli vengono assegnati come proprietà della colonna in un oggetto DataTable. Esistono diversi modi per creare una colonna del ruolo, ma i più comuni sono i più comuni:
Le prime due tecniche tracciano il seguente grafico:
Metodo DataTable.addColumn
Il seguente esempio crea un grafico a barre con un indicatore di intervallo su tre barre. Gli indicatori di intervallo sono specificati dalla terza e dalla quarta colonna utilizzando il metodo DataTable.addColumn().
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
Notazione letterale JavaScript
Nel valore letterale JSON, devi specificare una proprietà p della colonna con il valore "role":"role-type".
L'esempio seguente mostra come specificare i ruoli utilizzando la notazione letterale JavaScript. Questa operazione può essere eseguita solo al momento della creazione della tabella.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
Metodo DataView.setColumn
Quando crei una vista, puoi impostare esplicitamente il ruolo di una colonna. È utile quando si crea una nuova colonna calcolata. Per ulteriori informazioni, visita la pagina DataView.setColumns().