Panoramica
Una rappresentazione visiva di un albero di dati, in cui ogni nodo può avere zero o più elementi figlio e un solo padre (ad eccezione della radice, che non ha elementi padre). Ogni nodo viene visualizzato come un rettangolo, con dimensioni e colori in base ai valori che assegni. Le dimensioni e i colori vengono valutati rispetto a tutti gli altri nodi del grafico. Puoi specificare quanti livelli visualizzare contemporaneamente e, facoltativamente, visualizzare livelli più profondi in base a un suggerimento. Se un nodo è un nodo foglia, puoi specificare una dimensione e un colore; se non è una foglia, verrà visualizzata come un riquadro di delimitazione per i nodi foglia. Il comportamento predefinito consiste nel scendere nell'albero quando un utente fa clic con il pulsante destro del mouse su un nodo e tornare indietro nell'albero quando l'utente fa clic con il tasto destro del mouse sul grafico.
Le dimensioni totali del grafico sono determinate dalle dimensioni dell'elemento contenitore inserito nella pagina. Se hai nodi foglia con nomi troppo lunghi per essere visualizzati, il nome verrà troncato con i puntini di sospensione (...).
Esempio
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
In evidenza
Puoi specificare se gli elementi devono evidenziare e impostare colori specifici da utilizzare in questo caso per determinati elementi. Per attivare l'evidenziazione, imposta highlightOnMouseOver:true (per la versione 49 o precedente) o enableHighlight: true (per la versione 50 e versioni successive).
Da qui puoi impostare i colori da utilizzare per evidenziare gli elementi mediante le varie opzioni HighlightColor.
var options = { // For v49 or before
highlightOnMouseOver: true,
maxDepth: 1,
maxPostDepth: 2,
minHighlightColor: '#8c6bb1',
midHighlightColor: '#9ebcda',
maxHighlightColor: '#edf8fb',
minColor: '#009688',
midColor: '#f7f7f7',
maxColor: '#ee8100',
headerHeight: 15,
showScale: true,
height: 500,
useWeightedAverageForAggregation: true
};
var optionsV50 = { // For v50+
enableHighlight: true,
maxDepth: 1,
maxPostDepth: 2,
minHighlightColor: '#8c6bb1',
midHighlightColor: '#9ebcda',
maxHighlightColor: '#edf8fb',
minColor: '#009688',
midColor: '#f7f7f7',
maxColor: '#ee8100',
headerHeight: 15,
showScale: true,
height: 500,
useWeightedAverageForAggregation: true,
// Use click to highlight and double-click to drill down.
eventsConfig: {
highlight: ['click'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'],
drilldown: ['dblclick'],
}
};
Descrizione comando
Per impostazione predefinita, le descrizioni comando della mappa ad albero sono di base e mostrano l'etichetta della cella della mappa ad albero. Ciò è utile quando le celle sono troppo piccole per contenere le etichette, ma puoi personalizzarle ulteriormente come descritto in questa sezione.
Le descrizioni comando delle mappe ad albero sono personalizzate in modo diverso rispetto agli altri grafici: definisci una funzione e quindi imposti l'opzione generateTooltip su tale funzione. Ecco un semplice esempio:
Nel grafico riportato sopra, definiamo una funzione denominata showStaticTooltip che restituisce semplicemente una stringa con il codice HTML da mostrare ogni volta che l'utente passa il mouse sopra una cella della mappa ad albero. Prova. Il codice da generare è il seguente:
var options = {
minColor: '#e7711c',
midColor: '#fff',
maxColor: '#4374e0',
showScale: true,
generateTooltip: showStaticTooltip
};
tree.draw(data, options);
function showStaticTooltip(row, size, value) {
return '<div style="background:#fd9; padding:10px; border-style:solid">' +
'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
}
La funzione generateTooltip può essere qualsiasi JavaScript tu voglia. In genere, è preferibile utilizzare le descrizioni comando che variano in base ai valori dei dati. L'esempio seguente mostra come accedere a ogni campo della tabella dati.
Se passi il mouse sopra le celle della mappa ad albero sopra, vedrai una descrizione comando diversa per ogni cella. Tutte le funzioni della descrizione comando della mappa ad albero
hanno tre valori: row, size
e value.
row: la riga della cella nella tabella datisize: la somma del valore (colonna 3) di questa cella e di tutte le relative celle secondarievalue: il colore della cella, espresso come numero compreso tra 0 e 1
In showFullTooltip, la stringa restituita è una casella HTML
con cinque righe:
- La riga 1 mostra la riga appropriata della tabella dati, con un uso liberale di
data.getValue. - La riga 2 indica la riga corrispondente, che è solo
il parametro
row. - La riga 3 fornisce le informazioni della colonna 3 della tabella dati: la somma del valore della colonna 3 di questa riga, più i valori dei discendenti.
- La riga 4 fornisce le informazioni contenute nella colonna 4 della tabella dati. È il valore, ma espresso come un numero compreso tra 0 e 1 corrispondente al colore della cella.
var options = {
minColor: '#e7711c',
midColor: '#fff',
maxColor: '#4374e0',
showScale: true,
generateTooltip: showFullTooltip
};
tree.draw(data, options);
function showFullTooltip(row, size, value) {
return '<div style="background:#fd9; padding:10px; border-style:solid">' +
'<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
'</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
', ' + data.getValue(row, 3) + '</span><br>' +
'Datatable row: ' + row + '<br>' +
data.getColumnLabel(2) +
' (total value of this cell and its children): ' + size + '<br>' +
data.getColumnLabel(3) + ': ' + value + ' </div>';
}
}
Caricamento in corso...
Il nome del pacchetto google.charts.load è "treemap".
google.charts.load("current", {packages: ["treemap"]});
Il nome della classe della visualizzazione è google.visualization.TreeMap.
var visualization = new google.visualization.TreeMap(container);
Formato dei dati
Ogni riga nella tabella dei dati descrive un nodo (un rettangolo nel grafico). Ogni nodo (tranne il nodo radice) ha un nodo padre. Ogni nodo viene dimensionato e colorato in base ai propri valori rispetto agli altri nodi attualmente mostrati.
La tabella di dati deve avere quattro colonne nel seguente formato:
- Colonna 0 - [stringa] Un ID per questo nodo. Può essere qualsiasi stringa JavaScript valida, inclusi gli spazi, e qualsiasi lunghezza che una stringa può contenere. Questo valore viene visualizzato come intestazione del nodo.
- Colonna 1: [stringa]: l'ID del nodo principale. Se questo è un nodo radice, lascia vuoto questo campo. È consentita una sola radice per mappa ad albero.
- Colonna 2: [numero] - La dimensione del nodo. Sono consentiti valori positivi. Questo valore determina la dimensione del nodo, calcolata rispetto a tutti gli altri nodi attualmente mostrati. Per i nodi non foglia, questo valore viene ignorato e calcolato dalla dimensione di tutti i relativi nodi figlio.
- Colonna 3: [facoltativo, numero] - Un valore facoltativo utilizzato per calcolare un colore per questo nodo. È consentito qualsiasi valore, positivo o negativo.
Il valore del colore viene prima ricalcolato su una scala da
minColorValueamaxColorValue, dopodiché al nodo viene assegnato un colore dal gradiente compreso traminColoremaxColor.
Opzioni di configurazione
| Nome | |
|---|---|
| triggerHighlight (per v50 e versioni successive) |
Consente di stabilire se gli elementi devono mostrare gli effetti evidenziati. L'attivatore predefinito si trova al passaggio del mouse.
Il trigger può essere configurato con Tipo: booleano
Predefinito:false
|
| eventConfig (per v50 e versioni successive) |
La configurazione degli eventi per attivare le interazioni con la mappa ad albero. Formato per la configurazione delle interazioni:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Se l'array di configurazione non è definito o manca per un'interazione, verrà utilizzato il valore default.
Se la configurazione è un array vuoto, l'interazione verrà disattivata.
Per una configurazione valida,
mouse_event è obbligatorio e deve essere un evento mouse supportato. A questo punto puoi avere fino a quattro tasti di modifica facoltativi.
Esempio di utilizzo di Ctrl+Maiusc+Right_Click per salire nella struttura ad albero:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Tipo:oggetto
Predefinita:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
Il colore del testo. Specifica un valore di colore HTML. Tipo:stringa
Predefinito: #ffffff
|
| fontFamily |
La famiglia di caratteri da utilizzare per tutto il testo. Tipo:stringa
Predefinita: automatica
|
| fontSize |
La dimensione del carattere di tutto il testo, in punti. Tipo:numero
Predefinito:12
|
| forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame. Tipo: booleano
Predefinito:false
|
| headerColor |
Il colore della sezione dell'intestazione per ciascun nodo. Specifica un valore di colore HTML. Tipo:stringa
Predefinito: #988f86
|
| headerHeight |
L'altezza della sezione dell'intestazione per ogni nodo, in pixel (può essere zero). Digita il numero
Predefinito:0
|
| headerHighlightColor |
Il colore dell'intestazione di un nodo su cui viene passato il mouse. Specifica un valore di colore HTML oppure nullo; se nullo, questo valore verrà ridotto di Tipo:stringa
Predefinito:null
|
| highlightOnMouseOver (deprecato per la versione 50 e successive) |
Deprecato per la versione 50 e successive. Per la versione 50 e successive, utilizza Tipo: booleano
Predefinito:false
|
| hintOpacity |
Se Tipo:numero
Predefinito:0,0
|
| maxColor |
Il colore di un rettangolo con il valore della colonna 3: Tipo:stringa
Predefinito: #00dd00
|
| maxDepth |
Il numero massimo di livelli di nodi da mostrare nella visualizzazione corrente. I livelli verranno ridotti
nel piano attuale. Se il tuo albero ha più livelli di questo, dovrai salire o
scendere per vederli. Puoi vedere anche Tipo:numero
Predefinito:1
|
| maxHighlightColor |
Il colore di evidenziazione da utilizzare per il nodo con il valore più grande nella colonna 3. Specifica un valore di colore HTML oppure nullo; se nullo, questo valore sarà il valore di Tipo:stringa
Predefinito:null
|
| maxPostDepth |
Il numero di livelli di nodi oltre Tipo:numero
Predefinito:0
|
| maxColorValue |
Il valore massimo consentito nella colonna 3. Tutti i valori superiori a questo verranno tagliati in base a questo valore. Se impostato su null, verrà impostato sul valore massimo nella colonna. Tipo:numero
Predefinito:null
|
| midColor |
Il colore di un rettangolo con un valore della colonna 3 a metà tra Tipo:stringa
Predefinito: #000000
|
| midHighlightColor |
Il colore di evidenziazione da utilizzare per il nodo con un valore della colonna 3 vicino alla mediana di Tipo:stringa
Predefinito:null
|
| minColor |
Il colore di un rettangolo con il valore della colonna 3: Tipo:stringa
Predefinito: #dd0000
|
| minHighlightColor |
Il colore di evidenziazione da utilizzare per il nodo con il valore colonna 3 più vicino a
Tipo:stringa
Predefinito:null
|
| minColorValue |
Il valore minimo consentito nella colonna 3. Tutti i valori inferiori a questo verranno tagliati in base a questo valore. Se impostato su null, verrà calcolato come valore minimo nella colonna. Tipo:numero
Predefinito:null
|
| noColor |
Il colore da utilizzare per un rettangolo quando un nodo non ha valori per la colonna 3 e tale nodo è una foglia (o contiene solo foglie). Specifica un valore di colore HTML. Tipo:stringa
Predefinito: #000000
|
| noHighlightColor |
Il colore da utilizzare per un rettangolo di colore "nessun" quando evidenziato. Specifica un valore di colore HTML oppure nullo; se nullo, questo sarà il valore di Tipo:stringa
Predefinito:null
|
| showScale |
Indica se mostrare o meno una scala a gradiente di colore da Tipo: booleano
Predefinito:false
|
| showTooltips |
Indica se mostrare le descrizioni comando. Tipo: booleano
Predefinito:true
|
| textStyle |
Un oggetto che specifica lo stile di testo, per alcuni grafici che hanno testo nell'area dei contenuti, come la mappa ad albero. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| title |
Testo da visualizzare sopra il grafico. Tipo:stringa
Predefinito:nessun titolo
|
| titleTextStyle |
Un oggetto che specifica lo stile di testo del titolo. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Indica se utilizzare le medie ponderate per l'aggregazione. Tipo: booleano
Predefinito:false
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna il grafico. Tipo di reso: nessuno
|
getEventsConfig() (for v50+) |
Restituisce la configurazione dell'interazione corrente. Può essere utilizzato per verificare l'opzione di configurazione Tipo di reso: oggetto
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implementazione
standard di Tipo restituito: array di elementi di selezione
|
setSelection() |
Implementazione
standard di Tipo di reso: nessuno
|
goUpAndDraw() |
Sposta l'albero di un livello e traccialo di nuovo. Non genera un errore se il nodo è il nodo principale. Viene attivato automaticamente quando l'utente fa clic con il tasto destro del mouse su un nodo. Tipo di reso: nessuno
|
getMaxPossibleDepth() |
Restituisce la profondità massima possibile per la vista corrente. Tipo di reso:number
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
eventsConfig per gli attivatori di eventi configurabili.| Nome | |
|---|---|
onmouseover |
Attivato quando l'utente passa il mouse sopra un nodo. Al gestore di eventi viene trasmesso l'indice della riga della voce corrispondente nella tabella dati. Proprietà:riga
|
highlight (for v50+) |
Attivato quando l'utente evidenzia un nodo. L'attivatore predefinito è il mouseover.
Può essere configurato con Proprietà:riga
|
onmouseout |
Attivato quando l'utente esce dal nodo. Al gestore di eventi viene trasmesso l'indice della riga della voce corrispondente nella tabella dati. Proprietà:riga
|
unhighlight (for v50+) |
Attivato quando l'utente annulla l'evidenziazione di un nodo. Il trigger predefinito è mouseout.
Può essere configurato con Proprietà:riga
|
ready |
Attivato quando il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo Proprietà:nessuna
|
rollup |
Attivato quando l'utente torna indietro nell'albero. L'attivatore predefinito è il clic con il tasto destro del mouse.
Può essere configurato con Proprietà:riga
|
select |
Attivato quando l'utente visualizza in dettaglio o fa scorrere un nodo verso l'alto. Viene attivato anche quando viene chiamato il metodo Proprietà:nessuna
|
drilldown (for v50+) |
Attivato quando l'utente si sposta più in profondità nell'albero. L'attivatore predefinito è il clic.
Può essere configurato con Proprietà:nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.