In questa pagina vengono descritti il concetto e l'utilizzo dei ruoli nelle tabelle di dati del grafico.
- Quali sono i ruoli?
- Quali ruoli sono disponibili?
- Gerarchia e associatività dei ruoli
- Assegnazione di un ruolo
Che cosa sono i ruoli?
Gli oggetti Google DataTable e DataView ora supportano i ruoli di colonna assegnati esplicitamente. Un ruolo colonna descrive lo scopo dei dati in quella colonna: ad esempio, una colonna potrebbe contenere dati che descrivono il testo della descrizione comando, le annotazioni del punto dati o gli indicatori di incertezza. La maggior parte dei ruoli della colonna si applica alla colonna "dati" che la precede, immediatamente prima o prima del gruppo di colonne di ruoli consecutive. Ad esempio, potresti avere due colonne dopo una colonna di dati, una per la descrizione comando e una per l'annotazione. Tuttavia, dopo la colonna "dominio", sono generalmente consentiti i ruoli di colonna "Annotazione" e "AnnotationText".
Nota: se vuoi controllare i contenuti delle descrizioni comandi che vengono visualizzate quando l'utente passa il mouse sopra un grafico, consulta la sezione Descrizione comando.
In origine, per una colonna erano disponibili solo due ruoli: "dominio", che specifica i valori principali dell'asse, e "dati", che specifica altezze della barra, larghezze della porzione di torta e così via. Questi ruoli sono stati assegnati implicitamente in base all'ordine e al tipo di colonne nella tabella. Tuttavia, con la possibilità di assegnare esplicitamente ruoli di colonna, ora puoi aggiungere colonne facoltative che forniscono nuove funzionalità interessanti a un grafico, come etichette di annotazioni arbitrarie, testo descrittivo e barre di incertezza.
Se non assegni esplicitamente il ruolo di una colonna, il suo ruolo viene dedotto dall'ordine della colonna nella tabella, in base alla specifica del formato dei dati del grafico. In questa pagina vengono visualizzati i ruoli disponibili da assegnare esplicitamente e come assegnarli.
Di seguito è riportato un confronto tra le operazioni eseguibili con un grafico a linee che utilizza solo i ruoli predefiniti dedotti rispetto ai ruoli aggiuntivi assegnati esplicitamente.
Formato della tabella di dati del grafico a linee:
| Colonna 0 | Colonna 1 | … | Colonna N | |
|---|---|---|---|---|
| Finalità | Valori riga 1 | … | Valori riga N | |
| Tipo di dati | number | … | number | |
| Ruolo | dominio | dati | … | dati |
| Ruoli facoltativi della colonna supportata |
|
|
… |
|
| Grafico senza ruoli di colonna espliciti | Grafico con ruoli di colonna espliciti |
|---|---|
|
|
|
Questo grafico non applica esplicitamente i ruoli e può quindi utilizzare solo il layout di base delle colonne di dati e dominio riportato sopra. Tabella 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 i ruoli in modo esplicito, pertanto è possibile aggiungere colonne facoltative. Questo grafico contiene colonne facoltative per i ruoli annotazioni, annotazioni, testo e intervallo.
Tabella 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?
Nella tabella che segue vengono elencati tutti i ruoli supportati da Google Tables. Non tutti i ruoli sono supportati per tutti i tipi di grafici; nella documentazione di ogni grafico vengono descritti i ruoli disponibili e la loro posizione. I ruoli vengono visualizzati 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 interazione da parte dell'utente. Le annotazioni e il testo delle annotazioni possono essere assegnati sia ai punti dati che alle categorie (etichette dell'asse). Esistono due stili di annotazioni: il punto (predefinito) che traccia il testo dell'annotazione vicino al punto specificato e la riga, che disegna il testo dell'annotazione su una linea che divide in due l'area del grafico. Puoi specificare lo stile della linea impostando questa opzione del grafico: Tipo di dati: stringa Predefinito: stringa vuota |
Dati: label: 'Anno', 'Vendite', null, null, 'Expenses', null, null
role: dominio, dati, annotazione, annotazioni, dati, annotazione, testo annotazione
"2004", 1000, null 7, 7 7, 7, 7, 7, 7, 7, 7
Le lettere "A" e "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 il punto dati a cui è applicato, per visualizzare il valore di textText. Sono accettati valori null sia per le celle di annotazione che per le annotazioni di testo. Tuttavia, se hai un valore di annotazioni di testo, 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 ai punti dati che alle categorie (etichette dell'asse). Se disponi di una colonna annotazioniText, devi averne anche una. Il testo della descrizione comando, invece, 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 è sicuro o meno. La modalità di visualizzazione dipende dal tipo di grafico, ad esempio tramite linee tratteggiate o riempimento a strisce. Per i grafici a linee e ad area, il segmento tra due punti dati è certo se e solo se entrambi sono certi. Tipo di dati: booleano, dove vero è certo. falso è incerto. Predefinito: vero |
|
| enfasi | Enfatizza i punti dati del grafico specificati. Visualizzato come una linea spessa e/o un punto di grandi dimensioni. Per i grafici a linee e ad area, il segmento tra due punti dati viene enfatizzato se e 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, contrassegnato dalla colonna tre, dalle righe uno e due. La serie "Spese" presenta due segmenti in evidenza, indicati dalla quinta colonna, le righe due, tre e quattro. Nota come l'enfasi richiede l'enfasi di entrambi i punti di delimitazione. |
| intervallo | Indica un potenziale intervallo di dati per un punto specifico. Gli intervalli vengono generalmente visualizzati come indicatori di intervallo di stile della barra I. Le colonne a intervalli sono colonne numeriche; aggiungi colonne di 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: number 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 di intervallo definiscono una barra I che circonda i punti. I valori aumentano da sinistra a destra. Gli intervalli più alti e più bassi intorno a un punto indicano la parte superiore e inferiore della barra. Nota: per tutti i dettagli sugli intervalli, consulta Intervalli. |
| ambito | Indica se un punto non rientra nell'ambito. Se un punto non rientra nell'ambito, viene messo in evidenza visivamente. Per i grafici a linee e ad area, il segmento tra due punti dati rientra nell'ambito se è presente uno degli endpoint. Tipo di dati: booleano, dove true significa nell'ambito. Predefinito: vero |
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 "Vendite" a sinistra. Il primo segmento non è compreso nell'ambito perché entrambi i punti di confine non rientrano nell'ambito. La seconda colonna dell'ambito si applica alla colonna "Costi" a sinistra. Il primo segmento è contrassegnato come rientrante nell'ambito di applicazione di uno dei suoi punti di confine; il resto della riga non rientra nell'ambito, perché tutti gli altri punti vengono contrassegnati come fuori ambito. |
| style |
Stile di alcune proprietà di diversi aspetti dei dati. Tali valori sono:
Tipo di dati: stringa, in cui è possibile applicare più stili utilizzando una sintassi Valore predefinito: null |
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, ogni barra ha uno stile indipendente dalle altre che utilizzano il ruolo colonna Nota: ulteriori dettagli sono documentati altrove su come personalizzare lo stile di punti, linee e barre. Visualizza anche le opzioni per ogni tipo di grafico in cui è possibile specificare gli stili per altri tipi di entità, ad esempio 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 funzionalità non è supportata dalla visualizzazione Grafico a bolle. I contenuti delle descrizioni comando HTML dei grafici a bolle non sono personalizzabili. Tipo di dati: stringa Valore 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 sono assegnati a tutti i punti di entrambe le righe, nelle colonne 3 e 5. Nota: per ulteriori dettagli sulla personalizzazione delle descrizioni comando, consulta Descrizione comando. |
| dominio | Non è necessario assegnare esplicitamente questo ruolo a meno che non progetti un grafico multidominio (mostrato qui); il formato di base della tabella di dati consente al motore di creazione di grafici di dedurre le colonne a cui appartengono le colonne di dominio. Tuttavia, devi sapere quali sono le colonne di dominio in modo da sapere quali altre colonne possono essere modificate. Le colonne di dominio specificano le etichette lungo l'asse principale del grafico. A volte è possibile utilizzare più colonne di dominio per supportare più scale all'interno dello stesso grafico. Tipo di dati: di solito 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 illustra 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 stesse scale dell'asse. |
| dati | Non devi assegnare questo ruolo in modo esplicito; il formato di base della tabella di dati consente al motore di grafico di dedurre quali colonne sono colonne di dominio. Tuttavia, devi sapere quali sono le colonne di dati in modo da sapere quali altre possono essere modificate. Le colonne del ruolo dati specificano i dati della serie da visualizzare nel grafico. Per la maggior parte dei grafici, una colonna = 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 una aggiuntiva per ogni serie aggiuntiva; i grafici a candele richiedono quattro colonne di dati per ogni serie). Tipo di dati: number |
Gerarchia e associatività dei ruoli
Il seguente diagramma mostra quali colonne dei ruoli possono essere applicate a quali altre colonne dei ruoli. Tutte le colonne tranne le colonne del dominio si applicano al vicino più vicino a cui può essere applicato.
Ad esempio, una colonna annotazione si applica alla colonna dati più vicina a sinistra, mentre una colonna annotazione verrà applicata alla colonna annotazione più vicina a sinistra; un'annotazione si applicherà alla colonna dati o dominio più vicino 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:
Le prime due tecniche tracciano il grafico seguente:
Metodo DataTable.addColumn
L'esempio seguente 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.setColonne
Quando crei una vista, puoi impostare esplicitamente il ruolo di una colonna. Questo è utile durante la creazione di una nuova colonna calcolata. Per ulteriori informazioni, vedi DataView.setColumns().