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
Ejemplo: |
style |
Se aplica a: fila Tabla de datos
Una string de estilo intercalado para asignar a un nodo específico. La propiedad
Ejemplo:
|
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.
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 Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection(selection) |
Implementación
Tipo de datos que se muestra: ninguno
|
Eventos
Nombre | |
---|---|
contraer |
El evento se activa cuando 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 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.