Organograma

Visão geral

Os organogramas são diagramas de uma hierarquia de nós, geralmente usados para retratar relações superiores/subordinadas em uma organização. Uma árvore genealógica é 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 da visualização é google.visualization.OrgChart.

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

Formato de dados

Uma tabela com três colunas de strings, em que cada linha representa um nó no organograma. Aqui estão as três colunas:

  • Coluna 0: o ID do nó. Ele precisa ser único entre todos os nós e pode incluir qualquer caractere, incluindo espaços. Isso é mostrado no nó. Também é possível especificar um valor formatado para exibição no gráfico, mas o valor não formatado ainda será usado como ID.
  • Coluna 1 — [opcional] O ID do nó pai. Este deve ser o valor não formatado da coluna 0 de outra linha. Deixe não especificado para 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 aos elementos da tabela de dados usando o método setProperty() de DataTable:

Nome da propriedade
selectedStyle

Aplica-se a: linha "DataTable"

Uma string de estilo inline a ser atribuída a um nó específico quando selecionado. Você precisa definir a opção allowHtml=true para que isso funcione, 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');

estilo

Aplica-se a: linha "DataTable"

Uma string de estilo inline a ser atribuída a um nó específico. Ele é substituído pela propriedade selectedStyle. Você precisa definir a opção allowHtml=true para que isso funcione, 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
allowCollapse

Determina se clicar duas vezes recolherá um nó.

Tipo: boolean
Padrão:false
allowHtml

Se definido como verdadeiro, os nomes que incluem tags HTML serão renderizados como HTML.

Tipo: boolean
Padrão:false
color

Obsoleto. Em vez disso, use o nodeClass. A cor de fundo dos elementos do organograma.

Tipo: string
Padrão:'#edf7ff'
compactRows

Se definida como verdadeira, 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 do desenho e o comprimento da borda.

Tipo: boolean
Padrão:false
nodeClass

Um nome de classe para atribuir aos elementos do nó. Aplique CSS ao nome dessa classe para especificar cores ou estilos para os elementos do gráfico.

Tipo: string
Padrão:default class name
selectedNodeClass

Um nome de classe para atribuir aos elementos do nó selecionados. Aplique CSS ao nome dessa classe para especificar cores ou estilos para os elementos de gráfico selecionados.

Tipo: string
Padrão:default class name
selectionColor

Obsoleto. Em vez disso, use selectedNodeClass. A cor do plano de fundo dos elementos selecionados do organograma.

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 aberta ou fechada.
  • collapsed Indica se a linha será recolhida ou expandida. "true" significa recolher.
Tipo de devolução: none
draw(data, options)

Desenha o gráfico.

Tipo de devolução: none
getChildrenIndexes(row)

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

Tipo de devolução Array.<number>
getCollapsedNodes

Retorna uma matriz com a lista dos índices do nó recolhido.

Tipo de devolução: Array.<number>
getSelection()

Implementação padrão de getSelection(). Os elementos de seleção são elementos de linha. Pode 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 linha. Oferece suporte à seleção de várias linhas.

Return Type: 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: booleano que indica se o evento é "recolhimento" ou "expansão".
row: o índice baseado em zero da linha na tabela de dados, correspondente ao nó que está sendo clicado.
onmouseover

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

Propriedades:
row: o índice baseado em zero da linha na tabela de dados, correspondente ao nó que está sendo passado.
onmouseout

Acionado quando o usuário passa o cursor para fora de uma linha.

Propriedades:
row: o índice baseado em zero da linha na tabela de dados, correspondente ao nó de onde o mouse está sendo removido.
select

Evento de seleção padrão

Propriedades:
Nenhum
pronto

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 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.