Organograma

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.