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
Exemplo: |
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
Exemplo:
|
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ó.
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 Tipo de retorno:matriz de elementos de seleção
|
setSelection(selection) |
Implementação padrão de
Tipo de retorno:nenhum
|
Eventos
Nome | |
---|---|
recolher |
Evento acionado quando 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 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.