Gráfico da organização

Stay organized with collections Save and categorize content based on your preferences.

Visão geral

Os gráficos da organização são diagramas de uma hierarquia de nós, normalmente usados para retratar relações superiores/subordinadas em uma organização. Uma árvore da família é um tipo de organograma.

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:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Carregando

O nome do pacote é 'orgchart'.

  google.charts.load('current', {packages: ['orgchart']});

O nome da classe do layout é google.visualization.OrgChart.

  var visualization = new google.visualization.OrgChart(container);

Formato de dados

Uma tabela com três colunas de string, em que cada linha representa um nó no orggraph. Veja as três colunas:

  • Coluna 0: o ID do nó. Ele precisa ser exclusivo entre todos os nós e pode incluir qualquer caractere, incluindo espaços. Isso é mostrado no nó. Você pode especificar um valor formatado para ser exibido no gráfico, mas o valor não formatado ainda será usado como o ID.
  • Coluna 1: [opcional] o código do nó pai. Precisa ser o valor não formatado da coluna 0 de outra linha. Não especifique um nó raiz.
  • Coluna 2 (opcional): texto de dica de ferramenta a ser exibido quando um usuário passa o cursor sobre esse nó.

Cada nó pode ter zero ou um nó pai e zero ou mais nós filhos.

Propriedades personalizadas

Você pode atribuir as seguintes propriedades personalizadas a elementos da tabela de dados, usando o método setProperty() de DataTable:

Nome da propriedade
Estilo selecionado

Aplicável a:linha da DataTable

Uma string de estilo inline a ser atribuída a um nó específico quando selecionada. Para que isso funcione, é preciso definir a opção allowHtml=true, antes de chamar draw() na visualização. Isso substitui a opção selectionColor para o nó especificado.

Exemplo: myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

style

Aplicável a: linha da DataTable

Uma string de estilo inline a ser atribuída a um nó específico. É substituído pela propriedade selectedStyle. Para que isso funcione, é necessário definir a opção allowHtml=true, antes de chamar draw() na visualização. Isso substitui a opção color para o nó especificado.

Exemplo:   myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

Opções de configuração

Nome
PermitirFechar

Determina se o clique duplo recolhe um nó.

Tipo: boolean
Padrão:false
permitirHTML

Se definido como verdadeiro, os nomes que incluírem tags HTML serão renderizados como HTML.

Tipo: boolean
Padrão: false
cor

Obsoleto. Use nodeClass. A cor do plano de fundo dos elementos do orggraph.

Tipo: string
Padrão: '#edf7ff'
linhas compactas

Se definido como verdadeiro, as subárvores serão colocadas o mais próximo possível, desde que os nós não se sobreponham. Use essa opção para reduzir a largura geral e o comprimento da borda do desenho.

Tipo: boolean
Padrão:false
classeClass

Um nome de classe a ser atribuído aos elementos do nó. Aplique CSS a esse nome de classe para especificar cores ou estilos para os elementos do gráfico.

Tipo: string
Padrão: default class name
Classe de nó selecionada

Um nome de classe a ser atribuído aos elementos de nó selecionados. Aplique CSS a esse nome de classe para especificar cores ou estilos para elementos de gráfico selecionados.

Tipo: string
Padrão: default class name
Cor de seleção

Obsoleto. Use selectedNodeClass. A cor do plano de fundo dos elementos do orggraph selecionados.

Tipo: string
Padrão:'#d6e9f8'
tamanho

"pequeno", "médio" ou "grande"

Tipo: string
Padrão:'medium'

Métodos

Método
collapse(row, collapsed)
Recolhe ou expande o nó.
  • row: índice da linha a ser expandida ou recolhida.
  • collapsed Define se será ou não recolhido ou expandir a linha, em que "true" significa recolher.
Tipo de retorno: none
draw(data, options)

Desenha o gráfico.

Tipo de retorno: none
getChildrenIndexes(row)

Retorna uma matriz com os índices dos filhos do nó especificado.

Tipo de retorno Array.<number>
getCollapsedNodes

Retorna uma matriz com a lista dos índices de nós recolhidos.

Tipo de retorno: Array.<number>
getSelection()

Implementação padrão de getSelection(). Todos os elementos de seleção são de linha. É possível retornar mais de uma linha selecionada.

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

Implementação padrão de setSelection() . Trata cada entrada de seleção como uma seleção de linhas. Aceita a seleção de várias linhas.

Tipo de retorno: nenhum

Eventos

Nome
recolher

Evento acionado quando allowCollapse está definido como true e o usuário clica duas vezes em um nó com filhos.

Propriedades:
collapsed: um booleano que indica se esse é um evento de "recolhimento" ou "expansão".
row: o índice da linha na tabela de dados com base em zero, que corresponde ao nó que está sendo clicado.
Onmouseover

Acionado quando o usuário passa o cursor sobre uma linha específica.

Propriedades:
row: o índice da linha na tabela de dados com base em zero, que corresponde ao nó em que o mouse passou.
Onmouseout

Acionado quando o usuário sai da linha.

Propriedades:
row: o índice da linha na tabela de dados com base em zero, correspondendo ao nó que sai do mouse.
select

Evento de seleção padrão

Propriedades:
Nenhum
pronto

O gráfico está pronto para chamadas de método externo. 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 os métodos somente depois que o evento for disparado.

Propriedades:
Nenhum

Política de dados

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