Mapas de árvore

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 a você. Os tamanhos e cores são valorizados em relação a todos os outros nós no gráfico. Você pode especificar quantos níveis serão mostrados simultaneamente e, opcionalmente, mostrar níveis mais detalhados. Se um nó for de folha, você poderá especificar um tamanho e uma cor. Se não for uma folha, ela será exibida como uma caixa delimitadora de nós de folha. O comportamento padrão é mover a árvore para baixo quando um usuário clica em um nó com o botão esquerdo e voltar para a árvore quando o usuário clicar com o botão direito do mouse no gráfico.

O tamanho total do gráfico é determinado pelo tamanho do elemento contido que você insere na página. Se você tiver nós de folha com nomes muito longos para mostrar, 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 quando isso ocorrer. Para ativar o destaque, defina highlightOnMouseOver:true (para v49 ou anterior) ou enableHighlight: true (para v50+). Depois, você pode definir suas cores 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, mostrando o rótulo da célula da árvore de mapa. Isso é útil quando as células são muito pequenas para conter os rótulos, mas é possível personalizá-los ainda mais, conforme descrito nesta seção.

As dicas do Treemap são personalizadas de maneira diferente de outros gráficos: você define uma função e, em seguida, a opção generateTooltip para essa função. Veja um exemplo simples:

No gráfico acima, definimos uma função chamada showStaticTooltip, que simplesmente retorna uma string com o HTML a ser exibido sempre que o usuário passar o cursor sobre uma célula do mapa de árvore. Confira! O código a ser gerado é 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 de que você quiser. Normalmente, você vai querer dicas que variam de acordo com os 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. As funções de dica do mapa de árvore recebem três valores: row, size e value.

  • row: a linha da célula da tabela de dados.
  • size: a soma do valor (coluna 3) desta 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 liberal de data.getValue.
  • A linha 2 informa qual 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 informações da coluna 4 da tabela de dados. É o valor, mas expresso como um número entre 0 e 1 que corresponde à 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 do layout é 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 os valores relativos aos outros nós mostrados no momento.

A tabela de dados precisa ter quatro colunas no seguinte formato:

  • Coluna 0, [string] é um ID para esse nó. Ele pode ser qualquer string JavaScript válida, incluindo espaços e qualquer tamanho que uma string possa conter. Esse valor é exibido como cabeçalho do nó.
  • Coluna 1: [string]: o ID do nó pai. Se esse for um nó raiz, deixe em branco. Apenas uma raiz é permitida 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 são 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 a cor deste nó. Qualquer valor, positivo ou negativo, é permitido. Primeiro, o valor da cor é reprocessado em uma escala de minColorValue a maxColorValue e, em seguida, o nó recebe uma cor do gradiente entre minColor e maxColor.

Opções de configuração

Nome
enableDestacar (para v50+)

Determina se os elementos precisam mostrar efeitos destacados. O acionador padrão é exibido ao passar o cursor. O gatilho pode ser configurado com eventsConfig. Se definido como true, o destaque de elementos diferentes poderá ser especificado usando as várias opções de highlightColor.

Tipo: booleano
Padrão:falso
eventsConfig (para v50+)

A configuração do evento para acionar interações do mapa de árvore. Formato para configurar as 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 é obrigatório e precisa ser um evento de mouse compatível. Depois, é possível ter até quatro modificadores de chave opcionais.
Interações compatíveis:
destacar, remover destaque, consolidação, detalhamento.
Eventos de mouse compatíveis:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. Com 'contextmenu', corresponde ao clique com o botão direito do mouse.
Chaves do modificador de evento do mouse compatíveis:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
Encontre a configuração atual:
Método de chamada getEventsConfig().
Exemplo para usar Control + Shift + Right_Click para subir a á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
FrameIForce

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: falso
Cor do cabeçalho

A cor da seção do cabeçalho para cada nó. Especifique um valor de cor HTML.

Tipo: string
Padrão: #988f86
Altura do cabeçalho

A altura da seção do cabeçalho de cada nó, em pixels (pode ser zero).

Número do tipo
Padrão:0
Cor de destaque do cabeçalho

A cor do cabeçalho de um nó ao passar o cursor. Especifique um valor de cor HTML ou nulo. Se for nulo, esse valor será headerColor clareado em 35%.

Tipo: string
Padrão:nulo
destaqueOnMouseOver (descontinuado para a v50+)

Obsoleto para a v50+. Para a v50 e posteriores, use enableHighlight. Determina se os elementos precisam mostrar efeitos destacados ao passar o mouse. Se definido como true, o destaque de elementos diferentes poderá ser especificado usando as várias opções de highlightColor.

Tipo: booleano
Padrão: falso
dicaOpacidade

Quando maxPostDepth é maior que 1, os nós abaixo da profundidade atual são mostrados, hintOpacity especifica o grau de transparência. Precisa estar entre 0 e 1. Quanto maior o valor, mais fraco o nó.

Tipo:número
Padrão:0,0
maxColor

A cor de um retângulo com um valor de coluna 3 de maxColorValue. Especifique um valor de cor HTML.

Tipo: string
Padrão: #00dd00
profundidade máxima

O número máximo de níveis de nós a ser exibido na visualização atual. Os níveis serão nivelados no plano atual. Se a árvore tiver mais níveis do que isso, você precisará subir ou descer para vê-los. Também é possível ver os níveis de maxPostDepth abaixo dele como retângulos sombreados nesses nós.

Tipo: número
Padrão:1
Cor de destaque máximo

A cor de destaque a ser usada para o nó com o maior valor na coluna 3. Especifique um valor de cor HTML ou nulo. Se for nulo, esse valor será o valor de maxColor clareado em 35%.

Tipo: string
Padrão:nulo
maxPostDepth

Quantos níveis de nós além de maxDepth serão mostrados como "dica". Os nós com dicas são mostrados como retângulos sombreados em um nó que está dentro do limite maxDepth.

Tipo: número
Padrão: 0
Valor máximo da cor

O valor máximo permitido na coluna 3. Todos os valores maiores que isso 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
Cor média

A cor de um retângulo com um valor de coluna 3 entre maxColorValue e minColorValue. Especifique um valor de cor HTML.

Tipo: string
Padrão: #000000
Cor do meio do destaque

A cor de destaque a ser usada para o nó com um valor de coluna 3 próximo à mediana de minColorValue e maxColorValue. Especifique um valor de cor HTML ou nulo. Se for nulo, esse será o valor de midColor clareado em 35%.

Tipo: string
Padrão: nulo
minColor

A cor de um retângulo com o valor minColorValue da coluna 3. Especifique um valor de cor HTML.

Tipo: string
Padrão: #dd0000
Cor de destaque mínima

A cor de destaque a ser usada para o nó com um valor de coluna 3 mais próximo de minColorValue. Especifique um valor de cor HTML ou nulo. Se for nulo, esse será o valor de minColor clareado em 35%.

Tipo: string
Padrão:nulo
Valor de cor mínima

O valor mínimo permitido na coluna 3. Todos os valores inferiores a isso serão cortados para este valor. Se definido como nulo, ele será calculado como o valor mínimo na coluna.

Tipo:número
Padrão:nulo
cor

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
Cor de destaque

A cor a ser usada para um retângulo de cor "sem" quando destacada. Especifique um valor de cor HTML ou nulo. Se for nulo, será o valor de noColor clareado em 35%.

Tipo: string
Padrão: nulo
showScale

Mostra ou não uma escala de gradiente de cores de minColor a maxColor na parte superior do gráfico. Especifique como verdadeiro para mostrar a escala.

Tipo: booleano
Padrão:falso
dicasdeferramentas

Define se dicas de ferramentas serão exibidas.

Tipo: booleano
Padrão: verdadeiro
Estilo de texto

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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

Texto a ser exibido acima do gráfico.

Tipo: string
Padrão: sem título
TítulodoEstiloEstilo

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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightAverageForAggregate

Indica se é preciso usar médias ponderadas para agregação.

Tipo: booleano
Padrão:falso

Métodos

Método
draw(data, options)

Desenha o gráfico.

Tipo de retorno: nenhum
getEventsConfig() (for v50+)

Retorna a configuração da interação atual. Isso pode ser usado para verificar a opção de configuração eventsConfig

Tipo de retorno: objeto
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

Implementação getSelection() padrão. Os elementos selecionados são nós. Só é possível selecionar um nó por vez.

Tipo de retorno: matriz de elementos de seleção
setSelection()

Implementação setSelection() padrão. Os elementos selecionados são nós. Só é possível selecionar um nó por vez.

Tipo de retorno:nenhum
goUpAndDraw()

Desloque a árvore em um nível e desenhe-a novamente. Não será gerado um erro se o nó for raiz. Isso é disparado automaticamente quando o usuário clica com o botão direito do mouse em um nó.

Tipo de retorno: nenhum
getMaxPossibleDepth()

Retorna a profundidade máxima possível para a visualização atual.

Tipo de retorno: número
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Tipo de retorno: nenhum

Eventos

Consulte eventsConfig para ver os 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.

Propriedades:linha
highlight (for v50+)

Disparado quando o usuário destaca um nó. O acionador padrão é o mouseover. Pode ser configurado com eventsConfig para a v50+. O manipulador de eventos recebe o índice da linha da entrada correspondente na tabela de dados.

Propriedades: linha
onmouseout

Disparado quando o usuário sai do mouse de um nó. O manipulador de eventos recebe o índice da linha da entrada correspondente na tabela de dados.

Propriedades:linha
unhighlight (for v50+)

Disparado quando o usuário deixa de destacar um nó. O acionador padrão é o mouseout. Pode ser configurado com eventsConfig para a v50+. O manipulador de eventos recebe o índice da linha da entrada correspondente na tabela de dados.

Propriedades: linha
ready

Disparado quando o gráfico está pronto para chamadas de método externas. 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 draw e chame-o somente depois que o evento for acionado.

Propriedades: nenhuma
rollup

Disparado quando o usuário navega de volta para a árvore. O gatilho padrão é clicar com o botão direito do mouse. Ela pode ser configurada com eventsConfig para a v50+. A propriedade de linha transmitida para o manipulador de eventos é a linha do nó em que o usuário está navegando a partir de, não a linha em que o usuário está chegando.

Propriedades: linha
select

Disparado quando o usuário faz o detalhamento ou acumula um nó. Também acionado quando o método setSelection() ou goUpAndDraw() é chamado. Para saber qual nó foi selecionado, chame getSelection().

Propriedades:nenhuma
drilldown (for v50+)

Disparado quando o usuário navega mais para dentro da árvore. O gatilho padrão está clicando. Pode ser configurado com eventsConfig para a v50+. Para saber qual nó foi clicado, chame getSelection().

Propriedades:nenhuma

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.