Descripción general
Un gráfico de Gantt es un tipo de gráfico que ilustra el desglose de un proyecto en las tareas que lo componen. En los gráficos de Google Gantt, se muestra el inicio, el final y la duración de las tareas de un proyecto, así como las dependencias que podría tener. Los gráficos de Gantt de Google se procesan en el navegador con SVG. Al igual que todos los gráficos de Google, los gráficos de Gantt muestran información sobre la herramienta cuando el usuario se desplaza sobre los datos.
Nota: Los gráficos de Gantt no funcionan en las versiones anteriores de Internet Explorer. (IE8 y las versiones anteriores no admiten SVG, que los gráficos de Gantt requieren).
Un ejemplo simple
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['Research', 'Find sources', new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Write', 'Write paper', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var options = { height: 275 }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Sin dependencias
Para crear un gráfico de Gantt que no tenga dependencias, asegúrate de que el último valor de cada fila de tu DataTable esté configurado como null
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['2014Spring', 'Spring 2014', 'spring', new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null], ['2014Summer', 'Summer 2014', 'summer', new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null], ['2014Autumn', 'Autumn 2014', 'autumn', new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null], ['2014Winter', 'Winter 2014', 'winter', new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null], ['2015Spring', 'Spring 2015', 'spring', new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null], ['2015Summer', 'Summer 2015', 'summer', new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null], ['2015Autumn', 'Autumn 2015', 'autumn', new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null], ['2015Winter', 'Winter 2015', 'winter', new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null], ['Football', 'Football Season', 'sports', new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null], ['Baseball', 'Baseball Season', 'sports', new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null], ['Basketball', 'Basketball Season', 'sports', new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null], ['Hockey', 'Hockey Season', 'sports', new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null] ]); var options = { height: 400, gantt: { trackHeight: 30 } }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Agrupa recursos
Las tareas de naturaleza similar se pueden agrupar mediante recursos. Agrega una columna de tipo string
a tus datos (después de las columnas Task ID
y Task Name
) y asegúrate de que las tareas que deban agruparse en un recurso tengan el mismo ID de recurso. Los recursos se agruparán por color.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['Research', 'Find sources', null, new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Write', 'Write paper', 'write', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', 'write', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', 'complete', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', 'write', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var options = { height: 275 }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Inicio, finalización y duración del procesamiento
Los gráficos de Gantt aceptan tres valores relacionados con la duración de la tarea: una fecha de inicio, una fecha de finalización y una duración (en milisegundos). Si, por ejemplo, no hay una fecha de inicio, el gráfico puede calcular el tiempo que falta en función de la fecha de finalización y la duración. Lo mismo sucede con el cálculo de la fecha de finalización. Si se proporcionan la fecha de inicio y la de finalización, la duración se puede calcular entre ambas.
Consulta la siguiente tabla para obtener una lista de cómo Gantt maneja la presencia de inicio, finalización y duración en diferentes circunstancias.
Inicio | Fin | Duración | Resultado |
---|---|---|---|
Presente | Presente | Presente | Comprueba que la duración coincida con las horas de inicio y finalización. Genera un error si no es coherente. |
Presente | Presente | Nulo | Calcula la duración a partir de las horas de inicio y finalización. |
Presente | Nulo | Presente | Calcula la hora de finalización. |
Presente | Nulo | Nulo | Genera un error porque no se puede calcular la duración ni la hora de finalización. |
Nulo | Presente | Presente | Hora de inicio del procesamiento. |
Nulo | Nulo | Presente |
Calcula la hora de inicio según las dependencias. Junto con
defaultStartDate , permite dibujar el gráfico solo con las duraciones.
|
Nulo | Presente | Nulo | Genera un error porque no se puede calcular la hora de inicio ni la duración. |
Nulo | Nulo | Nulo | Muestra un error porque no se puede calcular la hora de inicio, la hora de finalización o la duración. |
Teniendo en cuenta lo anterior, puedes crear un gráfico en el que se defina un viaje cotidiano típico al trabajo con solo la duración de cada tarea.
<html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load("current", { packages: ["gantt"] }); google.charts.setOnLoadCallback(drawChart); function toMilliseconds(minutes) { return minutes * 60 * 1000; } function drawChart() { var otherData = new google.visualization.DataTable(); otherData.addColumn("string", "Task ID"); otherData.addColumn("string", "Task Name"); otherData.addColumn("string", "Resource"); otherData.addColumn("date", "Start"); otherData.addColumn("date", "End"); otherData.addColumn("number", "Duration"); otherData.addColumn("number", "Percent Complete"); otherData.addColumn("string", "Dependencies"); otherData.addRows([ [ "toTrain", "Walk to train stop", "walk", null, null, toMilliseconds(5), 100, null, ], [ "music", "Listen to music", "music", null, null, toMilliseconds(70), 100, null, ], [ "wait", "Wait for train", "wait", null, null, toMilliseconds(10), 100, "toTrain", ], [ "train", "Train ride", "train", null, null, toMilliseconds(45), 75, "wait", ], [ "toWork", "Walk to work", "walk", null, null, toMilliseconds(10), 0, "train", ], [ "work", "Sit down at desk", null, null, null, toMilliseconds(2), 0, "toWork", ], ]); var options = { height: 275, gantt: { defaultStartDate: new Date(2015, 3, 28), }, }; var chart = new google.visualization.Gantt( document.getElementById("chart_div") ); chart.draw(otherData, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Ruta crítica
La ruta de acceso crítica en un gráfico de Gantt es la ruta o rutas que afectan directamente la fecha de finalización. De forma predeterminada, los recorridos de Google en Gantt aparecen de color rojo y se pueden personalizar con las opciones de criticalPathStyle
. También puedes desactivar la ruta de acceso crítica si estableces criticalPathEnabled
en false
.
var options = { height: 275, gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } };
Cómo diseñar flechas
Puedes definir el estilo de las flechas de dependencia entre tareas con las opciones gantt.arrow
:
var options = { height: 275, gantt: { criticalPathEnabled: false, // Critical path arrows will be the same as other arrows. arrow: { angle: 100, width: 5, color: 'green', radius: 0 } } };
Cómo definir el estilo de las pistas
El estilo de cuadrícula se maneja mediante una combinación de innerGridHorizLine
, innerGridTrack
y innerGridDarkTrack
. Si solo se establece innerGridTrack
, el gráfico calculará un color más oscuro para innerGridDarkTrack
, pero si se establece solo innerGridDarkTrack
, innerGridTrack
usará su color predeterminado y no calculará un color más claro.
var options = { height: 275, gantt: { criticalPathEnabled: false, innerGridHorizLine: { stroke: '#ffe0b2', strokeWidth: 2 }, innerGridTrack: {fill: '#fff3e0'}, innerGridDarkTrack: {fill: '#ffcc80'} } };
Cargando
El nombre del paquete google.charts.load
es "gantt"
.
google.charts.load("current", {packages: ["gantt"]});
El nombre de clase de la visualización es google.visualization.Gantt
.
var chart = new google.visualization.Gantt(container);
Formato de los datos
Filas: Cada fila de la tabla representa una tarea.
Columnas:
Columna 0 | Columna 1 | Columna 2 | Columna 3 | Columna 4 | Columna 5 | Columna 6 | Columna 7 | |
---|---|---|---|---|---|---|---|---|
Propósito: | ID de la tarea | Nombre de la tarea | ID del recurso (opcional) | Inicio | Fin | Duración (en milisegundos) | Porcentaje completado | Dependencias |
Tipo de datos: | string | string | string | fecha | fecha | número | número | string |
Rol: | dominio | datos | datos | datos | datos | datos | datos | datos |
Opciones de configuración
Nombre | Tipo | Predeterminado | Descripción |
---|---|---|---|
fondoColor.fill | string | "blanco" | El color de relleno del gráfico, como una string de color HTML. |
gantt | objeto | null |
En Gráficos de Gantt, gantt.arrow controla las diversas propiedades de las flechas que conectan las tareas.
|
gantt.arrow.angle | número | 45 | El ángulo de la cabeza de la flecha. |
gantt.arrow.color | string | "#000" | El color de las flechas. |
gantt.arrow.length | número | 8 | Es la longitud de la cabeza de la flecha. |
gantt.arrow.radius | número | 15 | Radio para definir la curva de la flecha entre dos tareas. |
gantt.arrow.spaceDespués | número | 4 | La cantidad de espacio en blanco entre la cabeza de una flecha y la tarea a la que apunta. |
gantt.arrow.width | número | 1.4 | El ancho de las flechas. |
gantt.barCornerRadius | número | 2 | Radio para definir la curva de las esquinas de una barra. |
gantt.barHeight | número | null | La altura de las barras para las tareas. |
gantt.criticalPathEnabled | boolean | true |
Si es true , el estilo de las flechas en la ruta crítica será diferente.
|
gantt.criticalPath | objeto | null | Un objeto que contiene el estilo de cualquier flecha crítica de la ruta de acceso. |
gantt.criticalPathStyle.stroke | string | null | El color de las flechas de ruta críticas |
gantt.criticalPathStyle.strokeWidth | número | 1.4 | Espesor de cualquier flecha importante de la ruta. |
gantt.defaultStartDate. | fecha/número | null |
Si la fecha de inicio no se puede calcular a partir de los valores de la tabla de datos, se establecerá la fecha de inicio en esto. Acepta un valor de date (new Date(YYYY, M, D) ) o un número, que es la cantidad de milisegundos que se usará.
|
gantt.innerGridHorizLine | objeto | null | Define el estilo de las líneas de cuadrícula horizontales internas. |
gantt.innerGridHorizLine.Strike | string | null | El color de las líneas de la cuadrícula horizontal interna |
gantt.innerGridHorizLine.strokeWidth | número | 1 | Ancho de las líneas de la cuadrícula horizontal interna |
gantt.innerGridTrack.fill | string | null |
El color de relleno de la pista de cuadrícula interna Si no se especifica un innerGridDarkTrack.fill , esto se aplicará a cada segmento de la cuadrícula.
|
gantt.innerGridDarkTrack | string | null | El color de relleno de la pista de cuadrícula interna alternativa y oscura. |
gantt.labelMaxWidth | número | 300 | La cantidad máxima de espacio permitido para cada etiqueta de tarea. |
gantt.labelStyle | objeto | null |
Un objeto que contiene los estilos de las etiquetas de tareas. labelStyle: { fontName: Roboto2, fontSize: 14, color: '#757575' }, |
gantt.percentEnabled | boolean | true | Rellena la barra de tareas según el porcentaje completado de la tarea. |
gantt.percentStyle.fill | string | null | El color del porcentaje de la parte de una barra de tareas completada. |
gantt.shadowEnabled | boolean | true |
Si se establece en true , dibuja una sombra debajo de cada barra de tareas que tiene dependencias.
|
gantt.shadowColor | string | "#000" | Define el color de las sombras en cualquier barra de tareas que tenga dependencias. |
gantt.shadowOffset | número | 1 | Define el desplazamiento, en píxeles, de las sombras debajo de cualquier barra de tareas que tenga dependencias. |
gantt.sortTasks | boolean | true | Especifica que las tareas se deben ordenar por topología, si es verdadero; de lo contrario, usa el mismo orden que las filas correspondientes de la tabla de datos. |
gantt.trackHeight | número | null | La altura de las pistas. |
ancho | número | ancho del elemento contenedor | Ancho del gráfico en píxeles. |
alto | número | altura del elemento contenedor | altura del gráfico, en píxeles. |
Métodos
Método | Descripción |
---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getSelection() |
Muestra un arreglo de las entidades del gráfico seleccionadas.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Para este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos los recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
Evento | Descripción |
---|---|
click |
Se activa cuando el usuario hace clic dentro del gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de la leyenda, los ejes, las líneas de cuadrícula o las etiquetas. Propiedades: targetID
|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. Propiedades: ID, mensaje
|
ready |
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: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a Propiedades: ninguna
|
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.