Organigrama

Descripción general

Los organigramas son diagramas de una jerarquía de nodos que suelen usarse para representar relaciones superiores y subordinadas en una organización. Un árbol genealógico es un tipo de organigrama.

Ejemplo

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

Cargando

El nombre del paquete es 'orgchart'.

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

El nombre de clase de la visualización es google.visualization.OrgChart.

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

Formato de los datos

Una tabla con tres columnas de strings, en la que cada fila representa un nodo del orgchart. Estas son las tres columnas:

  • Columna 0: El ID del nodo Debe ser única entre todos los nodos y puede incluir cualquier carácter, incluidos los espacios. Esto se muestra en el nodo. Puedes especificar un valor con formato para que se muestre en el gráfico, pero el valor sin formato todavía se usa como ID.
  • Columna 1: [opcional] El ID del nodo superior. Este debería ser el valor sin formato de la columna 0 de otra fila. Deja sin especificar un nodo raíz.
  • Columna 2: [[opcional]] Texto de la información sobre la herramienta que se mostrará cuando un usuario se desplace sobre este nodo

Cada nodo puede tener cero o un nodo superior, y cero o más nodos secundarios.

Propiedades personalizadas

Puedes asignar las siguientes propiedades personalizadas a los elementos de la tabla de datos mediante el método setProperty() de DataTable:

Nombre de propiedad
Estilo seleccionado

Se aplica a: fila Tabla de datos

Una string de estilo intercalado para asignar a un nodo específico cuando se selecciona. Para que esto funcione, debes configurar la opción allowHtml=true, que debes configurar antes de llamar a draw() en la visualización. Esto anula la opción selectionColor para el nodo especificado.

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

style

Se aplica a: fila Tabla de datos

Una string de estilo intercalado para asignar a un nodo específico. La propiedad selectedStyle la anula. Para que esto funcione, debes configurar la opción allowHtml=true, que debes configurar antes de llamar a draw() en la visualización. Esto anula la opción color para el nodo especificado.

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

Opciones de configuración

Nombre
allowCollapse

Determina si el doble clic contrae un nodo.

Tipo: boolean
Predeterminado: false
allowHtml

Si se establece como verdadera, los nombres que incluyan etiquetas HTML se procesarán como HTML.

Tipo: boolean
Predeterminado: false
color

Obsoleto. En su lugar, usa nodeClass. El color de fondo de los elementos del organigrama

Tipo: string
Predeterminado: '#edf7ff'
filas_compactas

Si se establece como verdadera, los subárboles se colocan lo más cerca posible, siempre y cuando los nodos no se superpongan. Usa esta opción para reducir el ancho y el ancho del dibujo en general.

Tipo: boolean
Predeterminado: false
Clase node

Un nombre de clase para asignar a los elementos del nodo. Aplica CSS a este nombre de clase para especificar colores o estilos para los elementos del gráfico.

Tipo: string
Predeterminado: default class name
Clase de nodo seleccionada

Un nombre de clase para asignar a los elementos del nodo seleccionados. Aplica CSS a este nombre de clase para especificar colores o estilos en los elementos de gráficos seleccionados.

Tipo: string
Predeterminado: default class name
Color de selección

Obsoleto. En su lugar, usa selectedNodeClass. El color de fondo de los elementos del organigrama seleccionados

Tipo: string
Predeterminado: '#d6e9f8'
size

"pequeño", "mediano" o "grande"

Tipo: string
Predeterminado: 'medium'

Métodos

Método
collapse(row, collapsed)
Contrae o expande el nodo.
  • row: Es el índice de la fila que se puede expandir o contraer.
  • collapsed Indica si contraer o expandir la fila, en la que verdadero significa contraer.
Tipo de datos que se muestra: none
draw(data, options)

Dibuja el gráfico.

Tipo de datos que se muestra: none
getChildrenIndexes(row)

Muestra un arreglo con los índices de los elementos secundarios del nodo determinado.

Tipo de datos que se muestra Array.<number>
getCollapsedNodes

Muestra un arreglo con la lista de los índices del nodo contraído.

Tipo de datos que se muestra: Array.<number>
getSelection()

Implementación estándar de getSelection(). Los elementos de selección son todos elementos de fila. Puede mostrar más de una fila seleccionada.

Tipo de datos que se muestra: arreglo de elementos de selección
setSelection(selection)

Implementación setSelection() estándar. Trata cada entrada de selección como una selección de fila. Admite la selección de varias filas.

Tipo de datos que se muestra: ninguno

Eventos

Nombre
contraer

El evento se activa cuando allowCollapse se configura como true y el usuario hace doble clic en un nodo con elementos secundarios.

Propiedades:
collapsed: Es un valor booleano que indica si se trata de un evento de "contraer" o de "expansión".
row: Es el índice basado en cero de la fila de la tabla de datos, que corresponde al nodo en el que se hace clic.
onMouseover

Se activa cuando el usuario se desplaza sobre una fila específica.

Propiedades:
row: Es el índice basado en cero de la fila de la tabla de datos, que corresponde al nodo al que se desplaza el mouse.
onmouse

Se activa cuando el usuario se desplaza fuera de una fila.

Propiedades:
row: Es el índice basado en cero de la fila de la tabla de datos, que corresponde al nodo del que se desplaza el mouse.
select

Evento de selección estándar

Propiedades:
Ninguno
lista

El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw y llamar a los métodos solo después de que se active el evento.

Propiedades:
Ninguno

Política de Datos

El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.