Visão geral
Uma representação visual de uma árvore de dados, em que cada nó pode ter zero ou mais filhos e um pai (exceto a raiz, que não tem pais). Cada nó é exibido como um retângulo, dimensionado e colorido de acordo com os valores atribuídos por você. Os tamanhos e as cores têm valores em relação a todos os outros nós no gráfico. Você pode especificar quantos níveis serão exibidos simultaneamente e, opcionalmente, exibir níveis mais profundos de uma maneira sugerida. Se um nó for de folha, será possível especificar um tamanho e uma cor. Se não for uma folha, ele será exibido como uma caixa delimitadora para nós de folha. O comportamento padrão é mover para baixo na árvore quando um usuário clica com o botão esquerdo do mouse em um nó e voltar para cima quando um usuário clica com o botão direito do mouse no gráfico.
O tamanho total do gráfico é determinado pelo tamanho do elemento contêiner que você insere na sua página. Se você tiver nós de folhas com nomes muito longos, o nome será truncado com reticências (...).
Exemplo
<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>
Destaques
Você pode especificar se os elementos precisam ser destacados e definir cores específicas para
determinados elementos usarem quando isso ocorrer. Para ativar o destaque, defina
highlightOnMouseOver:true (para a v49 ou anterior) ou enableHighlight: true (para a v50+).
A partir daí, você pode definir as cores que serão usadas
para destacar elementos usando as várias opções de 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'],
}
};
Dicas
Por padrão, as dicas do mapa de árvore são básicas e mostram a etiqueta da célula. Isso é útil quando as células são muito pequenas para conter os rótulos, mas você pode personalizá-los ainda mais conforme descrito nesta seção.
As dicas do mapa de árvore são personalizadas de maneira diferente de outros gráficos: você define uma função e, em seguida, configura a opção generateTooltip para ela. Veja um exemplo simples:
No gráfico acima, definimos uma função chamada showStaticTooltip, que simplesmente retorna uma string com o HTML que será mostrado sempre que o usuário passar o cursor sobre uma célula do mapa de árvore. Confira! O código para gerar isso é o seguinte:
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>';
}
A função generateTooltip pode ser qualquer JavaScript que você
quiser. Normalmente, você vai querer dicas que variam com base nos valores dos dados. O exemplo a seguir mostra como acessar todos os campos na tabela de dados.
Se você passar o cursor sobre as células no mapa de árvore acima, verá uma dica diferente para cada célula. Todas as funções de dica de mapa de árvore
aceitam três valores: row, size
e value.
row: a linha da célula da tabela de dadossize: a soma do valor (coluna 3) dessa célula e de todos os filhos dela.value: a cor da célula, expressa como um número de 0 a 1.
Em showFullTooltip, a string que retornamos é uma caixa HTML com cinco linhas:
- A linha 1 mostra a linha apropriada da tabela de dados, fazendo
uso livre de
data.getValue. - A 2 informa qual é a linha, que é apenas
o parâmetro
row. - A linha 3 fornece informações da coluna 3 da tabela de dados: a soma do valor da coluna 3 dessa linha mais os valores dos descendentes.
- A linha 4 fornece as informações da coluna 4 da tabela de dados. É o valor, mas expresso como um número entre 0 e 1 correspondente à cor da célula.
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>';
}
}
Carregando
O nome do pacote google.charts.load é "treemap".
google.charts.load("current", {packages: ["treemap"]});
O nome da classe da visualização é google.visualization.TreeMap.
var visualization = new google.visualization.TreeMap(container);
Formato de dados
Cada linha na tabela de dados descreve um nó (um retângulo no gráfico). Cada nó (exceto o nó raiz) tem um nó pai. Cada nó é dimensionado e colorido de acordo com seus valores em relação aos outros nós mostrados no momento.
A tabela de dados deve ter quatro colunas neste formato:
- Coluna 0 - [string] um ID para esse nó. Pode ser qualquer string JavaScript válida, incluindo espaços e qualquer tamanho que uma string possa conter. Esse valor é exibido como o cabeçalho do nó.
- Coluna 1 — [string]: o ID do nó pai. Se for um nó raiz, deixe este campo em branco. Só é permitida uma raiz por mapa de árvore.
- Coluna 2: [número]: o tamanho do nó. Qualquer valor positivo é permitido. Esse valor determina o tamanho do nó, calculado em relação a todos os outros nós mostrados no momento. Para nós que não sejam de folha, esse valor é ignorado e calculado com base no tamanho de todos os filhos.
- Coluna 3 — [opcional, número] - Um valor opcional usado para calcular uma cor para este nó. Qualquer valor, positivo ou negativo, é permitido.
Primeiro, o valor da cor é recalculado em uma escala de
minColorValueamaxColorValue. Em seguida, o nó recebe uma cor do gradiente entreminColoremaxColor.
Opções de configuração
| Nome | |
|---|---|
| enableHighlight (para v50+) |
Determina se os elementos devem mostrar efeitos destacados. O gatilho padrão é quando o mouse é passado.
O gatilho pode ser configurado com Tipo: booleano
Padrão:false
|
| eventsConfig (para a versão v50 ou mais recente) |
A configuração do evento para acionar interações do mapa de árvore. Formate para configurar interações:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Se a matriz de configuração estiver indefinida ou ausente para uma interação, o default será usado.
Se a configuração for uma matriz vazia, a interação será desativada.
Para uma configuração válida,
mouse_event é necessário e precisa ser um evento de mouse compatível. É possível ter até quatro modificadores de tecla opcionais.
Exemplo para usar Control+Shift+Right_Click para subir na árvore:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Tipo: objeto
Padrão:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
A cor do texto. Especifique um valor de cor HTML. Tipo: string
Padrão: #ffffff
|
| fontFamily |
A família de fontes a ser usada em todo o texto. Tipo: string
Padrão:automático
|
| fontSize |
É o tamanho da fonte de todo o texto, em pontos. Tipo: número
Padrão:12
|
| forceIFrame |
Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano
Padrão:false
|
| headerColor |
A cor da seção do cabeçalho de cada nó. Especifique um valor de cor HTML. Tipo: string
Padrão: #988f86
|
| headerHeight |
A altura da seção do cabeçalho de cada nó, em pixels (pode ser zero). Número do tipo
Padrão:0
|
| headerHighlightColor |
A cor do cabeçalho de um nó sobre o qual você está passando o cursor. Especifica um valor de cor HTML ou nulo.
Se nulo, esse valor será reduzido em 35% para Tipo: string
Padrão:nulo
|
| destaqueOnMouseOver (descontinuado na versão v50 ou mais recente) |
Descontinuado para v50+. Para v50 e posteriores, use Tipo: booleano
Padrão:false
|
| hintOpacity |
Quando Tipo: número
Padrão:0,0
|
| maxColor |
A cor de um retângulo com um valor de coluna 3 de Tipo: string
Padrão: #00dd00
|
| maxDepth |
O número máximo de níveis de nó a serem mostrados na visualização atual. Os níveis serão nivelados
no plano atual. Se sua árvore tiver mais níveis do que isso, você terá que subir ou descer para vê-los. Além disso, é possível ver os níveis de Tipo: número
Padrão: 1
|
| maxHighlightColor |
A cor de destaque a ser usada para o nó com o maior valor na coluna 3. Especifica um valor de cor HTML ou nulo. Se nulo, esse valor será o valor de Tipo: string
Padrão:nulo
|
| maxPostDepth |
Quantos níveis de nós além de Tipo: número
Padrão:0
|
| maxColorValue |
O valor máximo permitido na coluna 3. Todos os valores maiores que esse serão cortados para esse valor. Se definido como nulo, ele será definido como o valor máximo na coluna. Tipo: número
Padrão:nulo
|
| midColor |
A cor de um retângulo com um valor de coluna 3 no meio entre Tipo: string
Padrão: #000000
|
| midHighlightColor |
A cor de destaque a ser usada para o nó com um valor da coluna 3 próximo à mediana de
Tipo: string
Padrão:nulo
|
| minColor |
A cor de um retângulo com o valor da coluna 3 de Tipo: string
Padrão: #dd0000
|
| minHighlightColor |
A cor de destaque a ser usada para o nó com um valor da coluna 3 mais próximo de
Tipo: string
Padrão:nulo
|
| minColorValue |
O valor mínimo permitido na coluna 3. Todos os valores menores que isso serão cortados para esse valor. Se definido como nulo, ele será calculado como o valor mínimo na coluna. Tipo: número
Padrão:nulo
|
| noColor |
A cor a ser usada em um retângulo quando um nó não tem valor para a coluna 3 e esse nó é uma folha (ou contém apenas folhas). Especifique um valor de cor HTML. Tipo: string
Padrão: #000000
|
| noHighlightColor |
A cor a ser usada para um retângulo de cor “não” quando destacado. Especifica um valor de cor HTML
ou nulo. Se nulo, será o valor de Tipo: string
Padrão:nulo
|
| showScale |
Indica se uma escala de gradiente de cor será exibida de Tipo: booleano
Padrão:false
|
| showTooltips |
Indica se as dicas serão mostradas. Tipo: booleano
Padrão:true
|
| textStyle |
Um objeto que especifica o estilo de texto para determinados gráficos que têm texto na área de conteúdo, como o mapa de árvore. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| título |
Texto a ser exibido acima do gráfico. Tipo: string
Padrão:sem título
|
| titleTextStyle |
Um objeto que especifica o estilo do texto do título. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Indica se médias ponderadas devem ser usadas para agregação. Tipo: booleano
Padrão:false
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Desenha o gráfico. Return Type: nenhum
|
getEventsConfig() (for v50+) |
Retorna a configuração de interação atual. Isso pode ser usado para verificar a opção de configuração Tipo de retorno: Object
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implementação
padrão de
Tipo de retorno:matriz de elementos de seleção
|
setSelection() |
Implementação
padrão de
Return Type: nenhum
|
goUpAndDraw() |
Suba um nível na árvore e desenhe-a novamente. Não gera um erro se o nó for o nó raiz. Disparado automaticamente quando o usuário clica com o botão direito do mouse em um nó. Return Type: nenhum
|
getMaxPossibleDepth() |
Retorna a profundidade máxima possível para a visualização atual. Tipo de devolução: número
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Return Type: nenhum
|
Eventos
eventsConfig para mais informações sobre acionadores de eventos configuráveis.| Nome | |
|---|---|
onmouseover |
Disparado quando o usuário passa o mouse sobre um nó. O manipulador de eventos recebe o índice da linha da entrada correspondente na tabela de dados. Properties:linha
|
highlight (for v50+) |
Disparado quando o usuário destaca um nó. O gatilho padrão é mouseover.
Ele pode ser configurado com Properties:linha
|
onmouseout |
Disparado quando o usuário tira o mouse de um nó. O manipulador de eventos recebe o índice da linha da entrada correspondente na tabela de dados. Properties:linha
|
unhighlight (for v50+) |
Disparado quando o usuário remove o destaque de um nó. O gatilho padrão é mouseout.
Ele pode ser configurado com Properties:linha
|
ready |
Disparado quando o gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método Propriedades:nenhuma.
|
rollup |
Disparado quando o usuário volta para cima na árvore. O gatilho padrão é clicar com o botão direito do mouse.
Ele pode ser configurado com Properties:linha
|
select |
Disparado quando o usuário faz o detalhamento ou acumula um nó. Também acionado quando o método Properties:nenhuma
|
drilldown (for v50+) |
Disparado quando o usuário navega mais profundamente na árvore. O gatilho padrão é um clique.
Ele pode ser configurado com Properties:nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.