Organigrama

Descripción general

Los diagramas de organización son diagramas de una jerarquía de nodos, de uso general para representar relaciones superiores o subordinadas en una organización. El á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 datos

Una tabla con tres columnas de cadenas, en la que cada fila representa un nodo en el organigrama. 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 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 se sigue usando como el ID.
  • Columna 1 - [opcional] El ID del nodo superior. Este debe ser el valor sin formato de la columna 0 de otra fila. No se especifica para un nodo raíz.
  • Columna 2: [opcional]: Texto de sugerencia de herramientas para mostrar cuando un usuario coloca el cursor 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 con el método setProperty() de DataTable:

Nombre de propiedad
selectedStyle

Se aplica a: fila de DataTable

Una cadena de estilo intercalado para asignar a un nodo específico cuando se selecciona. Para que funcione, debes configurar la opción allowHtml=true y debes configurarla 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');

estilo

Se aplica a: fila de DataTable

Es una cadena de estilo intercalado para asignar a un nodo específico. Esto se anula con la propiedad selectedStyle. Para que esto funcione, debes configurar la opción allowHtml=true y debes configurarla 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 hacer doble clic contraerá un nodo.

Tipo: boolean
Valor predeterminado: false
allowHtml

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

Tipo: boolean
Valor predeterminado: false
color

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

Tipo: string
Valor predeterminado: '#edf7ff'
compactRows

Si se configura como verdadero, los subárboles se colocan lo más cerca posible, siempre y cuando los nodos no se superpongan. Utiliza esta opción para reducir el ancho general del dibujo y la longitud de borde.

Tipo: boolean
Valor predeterminado: false
nodeClass

Es un nombre de clase para asignar a los elementos del nodo. Aplica CSS al nombre de esta clase para especificar colores o estilos para los elementos del gráfico.

Tipo: string
Valor predeterminado: default class name
selectedNodeClass

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

Tipo: string
Valor predeterminado: default class name
selectionColor

Obsoleto. En su lugar, usa selectedNodeClass. Es el color de fondo de los elementos de organigrama seleccionados.

Tipo: string
Valor predeterminado: '#d6e9f8'
tamaño

'pequeño', 'mediano' o 'grande'

Tipo: string
Valor predeterminado: 'medium'

Métodos

Método
collapse(row, collapsed)
Contrae o expande el nodo.
  • row: Índice de la fila que se expande o se contrae.
  • collapsed Indica si se debe contraer o expandir la fila, donde 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 array con los índices de los elementos secundarios del nodo determinado.

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

Muestra un array 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 la fila. Puede mostrar más de una fila seleccionada.

Tipo de datos que se muestra: Es el array de elementos de selección.
setSelection(selection)

Implementación estándar de setSelection() . 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

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 en la tabla de datos, que corresponde al nodo en el que se hace clic.
onmouseover

Se activa cuando el usuario coloca el cursor sobre una fila específica.

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

Se activa cuando el usuario se desplaza sobre una fila.

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

Seleccionar evento estándar

Propiedades:
Ninguno
lista

El gráfico está listo para llamadas de método externas. 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

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