Panoramica
Una rappresentazione visiva di un albero di dati, dove ogni nodo può avere zero o più elementi secondari e un elemento padre (tranne quello principale, che non ha elementi padre). Ogni nodo viene visualizzato sotto forma di rettangolo, dimensioni e colore in base ai valori assegnati. Le dimensioni e i colori vengono valutati rispetto a tutti gli altri nodi nel grafico. Puoi specificare il numero di livelli da visualizzare contemporaneamente e, facoltativamente, visualizzare livelli più profondi in base a suggerimenti specifici. Se un nodo è una foglia, puoi specificare le dimensioni e il colore; se non è una foglia, verrà visualizzata come riquadro di delimitazione per i nodi delle foglie. Il comportamento predefinito prevede lo spostamento verso il basso dell'albero quando un utente fa clic con il pulsante sinistro del mouse su un nodo e lo spostamento in alto della finestra quando un utente fa clic con il pulsante destro del mouse sul grafico.
Le dimensioni totali del grafico sono determinate dalle dimensioni dell'elemento contenitore che inserisci nella pagina. Se hai nodi foglia con nomi troppo lunghi da mostrare, 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 essere evidenziati e impostare colori specifici per determinati elementi da utilizzare in questi casi. Per attivare l'evidenziazione, imposta highlightOnMouseOver:true (per v49 o precedenti) o enableHighlight: true (per v50+). Da qui puoi impostare i colori da utilizzare per evidenziare elementi utilizzando le varie opzioni di 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. Questo è utile quando le celle sono troppo piccole per contenere le etichette, ma puoi personalizzarle ulteriormente come descritto in questa sezione.
Le descrizioni comando della mappa ad albero sono personalizzate in modo diverso rispetto ad altri grafici: definisci una funzione e poi imposti l'opzione generateTooltip su tale funzione. Ecco un semplice esempio:
Nel grafico sopra, definiamo una funzione chiamata showStaticTooltip che restituisce semplicemente una stringa con il codice HTML da mostrare ogni volta che l'utente passa il mouse sopra una cella ad albero della mappa ad albero. Prova. Di seguito è riportato il codice da generare:
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. Di solito, sono necessarie descrizioni comandi che variano in base ai valori dei dati. L'esempio seguente mostra come accedere a ogni campo nella tabella dati.
Se passi il mouse sopra le celle della mappa ad albero sopra, vedrai una descrizione comando diversa per ogni cella. La descrizione comando della mappa ad albero accetta tutti e tre i valori: row, size e value.
row: la riga della cella nella tabella datisize: la somma del valore (colonna 3) di questa cella e di tutti i relativi elementi secondarivalue: il colore della cella, espresso come numero da 0 a 1
In showFullTooltip, la stringa che restituiamo è un riquadro HTML con cinque righe:
- La riga 1 mostra la riga appropriata dalla tabella dati, facendo un uso liberale di
data.getValue. - La riga 2 indica la riga, ovvero il parametro
row. - La riga 3 fornisce informazioni dalla colonna 3 della tabella dati: la somma del valore della colonna 3 di questa riga, più i valori dei discendenti.
- La riga 4 fornisce informazioni della colonna 4 della tabella dati. Indica 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
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 di dati descrive un nodo (un rettangolo nel grafico). Ogni nodo (tranne il nodo radice) ha un nodo padre. Ogni nodo è dimensionato e colorato in base ai suoi valori rispetto agli altri nodi attualmente mostrati.
La tabella dati deve avere quattro colonne nel formato seguente:
- Colonna 0 - [string] Un ID per questo nodo. Può essere qualsiasi stringa JavaScript valida, inclusi gli spazi, e qualsiasi lunghezza che può contenere una stringa. Questo valore viene visualizzato come intestazione del nodo.
- Colonna 1 - [stringa]: l'ID del nodo padre. Se si tratta di un nodo radice, lascia vuoto questo campo. È consentita una sola radice per mappa ad albero.
- Colonna 2 - [numero] - Le dimensioni del nodo. È consentito qualsiasi valore positivo. Questo valore determina le dimensioni del nodo, calcolate rispetto a tutti gli altri nodi attualmente mostrati. Per i nodi non foglia, questo valore viene ignorato e calcolato in base alle dimensioni di tutte le relative unità secondarie.
- 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, poi al nodo viene assegnato un colore dal gradiente traminColoremaxColor.
Opzioni di configurazione
| Nome | |
|---|---|
| Enablehighlight (per v50 e versioni successive) |
Determina se gli elementi devono mostrare effetti evidenziati. L'attivazione predefinita avviene al passaggio del mouse.
Il trigger può essere configurato con Tipo: booleano
Predefinito: falso
|
| eventsConfig (per v50 e versioni successive) |
La configurazione dell'evento per attivare le interazioni della mappa ad albero. Formato per configurare le interazioni:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Se la matrice di configurazione non è definita o è mancante per un'interazione, verrà utilizzato il valore predefinito.
Se la configurazione è un array vuoto, l'interazione verrà disattivata.
Per una configurazione valida, il campo
mouse_event è obbligatorio e deve essere un evento mouse supportato. In seguito, potrai avere fino a quattro modificatori di chiavi facoltativi.
Esempio di utilizzo di Ctrl+Maiusc+Right_Click per salire nella struttura ad albero:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Tipo: oggetto
Predefinito:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| Colore carattere |
Il colore del testo. Specifica un valore di colore HTML. Tipo: stringa
Predefinito: #IdP
|
| Famiglia di caratteri |
La famiglia di caratteri da utilizzare per tutto il testo. Tipo: stringa
Predefinito: automatica
|
| Dimensione carattere |
Le dimensioni del carattere per tutto il testo, espresso in punti. Tipo: numero
Predefinito: 12
|
| forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame. Tipo: booleano
Predefinito: falso
|
| coloreintestazione |
Il colore della sezione di intestazione per ciascun nodo. Specifica un valore di colore HTML. Tipo: stringa
Predefinito: #988f86
|
| intestazioneAltezza |
L'altezza della sezione di intestazione di ogni nodo, in pixel (può essere zero). Numero Type
Predefinito: 0
|
| intestazioneColoreColore |
Il colore dell'intestazione di un nodo al passaggio del mouse. Specifica un valore di colore HTML o nullo;
se nullo questo valore sarà Tipo: stringa
Predefinito: null
|
| highlightOnMouseOver (deprecato per v50+) |
Deprecato per v50+. Per v50+, utilizza Tipo: booleano
Predefinito: falso
|
| hintOpacity |
Se Tipo: numero
Predefinito: 0,0
|
| Colore massimo |
Il colore di un rettangolo con valore Tipo: stringa
Predefinito: #00dd00
|
| Profondità massima |
Il numero massimo di livelli di nodi da mostrare nella vista corrente. I livelli verranno suddivisi nel piano attuale. Se l'albero ha più livelli, dovrai salire o
scendere per visualizzarli. Puoi anche vedere Tipo: numero
Predefinito: 1
|
| Colore principale in evidenza |
Il colore di evidenziazione da utilizzare per il nodo con il valore più alto nella colonna 3. Specifica un valore di colore HTML o null; se nullo, questo valore sarà il valore di Tipo: stringa
Predefinito: null
|
| Profondità massima di post |
Quanti livelli di nodi oltre Tipo: numero
Predefinito: 0
|
| Valore massimo colore |
Il valore massimo consentito nella colonna 3. Tutti i valori superiori a questo valore verranno tagliati a questo valore. Se viene impostato su null, verrà impostato il valore massimo nella colonna. Tipo: numero
Predefinito: null
|
| Mi piace |
Il colore di un rettangolo con valore di colonna 3 a metà strada tra Tipo: stringa
Predefinito: #000000
|
| Colore mette in evidenza il colore |
Il colore di evidenziazione da utilizzare per il nodo con un valore colonna 3 vicino alla mediana di
Tipo: stringa
Predefinito: null
|
| Colore min |
Il colore di un rettangolo con il valore colonna 3 Tipo: stringa
Predefinito: #dd0000
|
| minEvidenzia colore |
Il colore di evidenziazione da utilizzare per il nodo con un valore della colonna più vicino a Tipo: stringa
Predefinito: null
|
| Valore colore min |
Il valore minimo consentito nella colonna 3. Tutti i valori inferiori a questo valore verranno tagliati a questo valore. Se impostato su null, il valore verrà calcolato come valore minimo nella colonna. Tipo: numero
Predefinito: null
|
| Nessun colore |
Il colore da utilizzare per un rettangolo quando un nodo non ha un valore per la colonna 3 e ha una foglia (o contiene solo foglie). Specifica un valore di colore HTML. Tipo: stringa
Predefinito: #000000
|
| Nessun coloreIn evidenza |
Il colore da utilizzare per un rettangolo di colore "no" quando evidenziato. Specifica un valore di colore HTML o null; se null, questo sarà il valore di Tipo: stringa
Predefinito: null
|
| scalaScala |
Consente di indicare se mostrare o meno una scala di gradiente di colore da Tipo: booleano
Predefinito: falso
|
| suggerimenti strumenti per la visualizzazione |
Indica se mostrare le descrizioni comando. Tipo: booleano
Predefinito: true
|
| stile testo |
Un oggetto che specifica lo stile di testo, per determinati grafici con 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
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| title |
Testo da visualizzare sopra il grafico. Tipo: stringa
Predefinito: nessun titolo
|
| titoloTestoStile |
Un oggetto che specifica lo stile del testo del titolo. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| usaPonderataMediaPerAggregazione |
Indica se utilizzare medie ponderate per l'aggregazione. Tipo: booleano
Predefinito: falso
|
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
Tipo di reso: array di elementi di selezione
|
setSelection() |
Implementazione
Tipo di reso: nessuno
|
goUpAndDraw() |
Sali di un livello verso l'alto e disegna di nuovo. Non genera un errore se il nodo è il nodo radice. 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: numero
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
eventsConfig per attivare attivatori di eventi configurabili.| Nome | |
|---|---|
onmouseover |
Attivato quando l'utente passa il mouse sopra un nodo. Il gestore di eventi trasmette 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 sposta il puntatore del mouse fuori da un nodo. Il gestore di eventi trasmette 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. L'attivatore predefinito è mouseout.
Può essere configurato con Proprietà: riga
|
ready |
Attivato quando il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e i metodi di chiamata dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo Proprietà: nessuna
|
rollup |
Attivato quando l'utente torna indietro nell'albero. L'attivatore predefinito sta facendo clic con il tasto destro del mouse.
Può essere configurato con Proprietà: riga
|
select |
Attivato quando l'utente visualizza in dettaglio o esegue il rollback di un nodo. Attivato anche quando viene richiamato il metodo Proprietà: nessuna
|
drilldown (for v50+) |
Attivato quando l'utente si sposta più in profondità nell'albero. L'attivatore predefinito sta facendo 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 ad alcun server.