Visão geral
Um gráfico de Gantt é um tipo de gráfico que ilustra o detalhamento de um projeto nas tarefas do componente. Os gráficos de Gantt do Google ilustram o início, o fim e a duração das tarefas em um projeto, bem como as dependências que uma tarefa pode ter. Os gráficos do Google Gantt são renderizados no navegador usando SVG. Como todos os gráficos do Google, os gráficos de Gantt exibem dicas quando o usuário passa o cursor sobre os dados.
Observação:os gráficos Gantt não funcionam em versões antigas do Internet Explorer. O IE8 e versões anteriores não são compatíveis com SVG, já os gráficos Gantt exigem isso.
Um exemplo simples
<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>
Sem dependências
Para criar um gráfico Gantt sem dependências, verifique se o último valor de cada linha da sua tabela de dados está definido 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>
Como agrupar recursos
Tarefas de natureza semelhante podem ser agrupadas usando recursos. Adicione uma coluna do tipo string
aos dados (após as colunas Task ID
e Task Name
) e verifique se as tarefas que precisam ser agrupadas em um recurso têm o mesmo ID do recurso. Os recursos serão agrupados por cor.
<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>
Como calcular o início/fim/duração
Os gráficos de Gatt aceitam três valores relacionados à duração da tarefa: uma data de início, uma data de término e uma duração (em milissegundos). Por exemplo, se não houver data de início, o gráfico poderá calcular o tempo ausente com base na data de término e na duração. O mesmo vale para a data de término. Se as datas de início e de término forem fornecidas, a duração poderá ser calculada entre os dois.
Consulte a tabela abaixo para ver uma lista de como o Gantt gerencia a presença do início, do fim e da duração em diferentes circunstâncias.
Iniciar | End | Duração | Resultado |
---|---|---|---|
Presente | Presente | Presente | Verifique se a duração é consistente com os horários de início/término. Lança erro se for inconsistente. |
Presente | Presente | Nulo | Calcula a duração a partir dos horários de início e término. |
Presente | Nulo | Presente | Calcula o horário de término. |
Presente | Nulo | Nulo | Lança o erro como se não fosse possível calcular a duração ou o horário de término. |
Nulo | Presente | Presente | Calcula o horário de início. |
Nulo | Nulo | Presente |
Calcula o horário de início com base nas dependências. Em conjunto com defaultStartDate , permite que o gráfico seja desenhado usando apenas durações.
|
Nulo | Presente | Nulo | Um erro é exibido porque não é possível calcular o horário de início ou a duração. |
Nulo | Nulo | Nulo | Isso gera um erro como "não foi possível calcular o horário de início, o horário de término ou a duração" |
Com isso em mente, é possível criar um gráfico com uma rota típica de trabalho para usar apenas a duração de cada tarefa.
<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>
Caminho crítico
O caminho crítico em um gráfico de Gantt é um ou mais caminhos que afetam diretamente a
data de término. O caminho essencial nos gráficos do Gantt é vermelho por padrão e pode ser
personalizado usando as opções criticalPathStyle
. Também é possível desativar o caminho crítico definindo criticalPathEnabled
como false
.
var options = { height: 275, gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } };
Personalizar as setas
É possível definir o estilo das setas de dependência entre tarefas com as opções 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 } } };
Como definir o estilo das faixas
O estilo da grade é processado por uma combinação de innerGridHorizLine
, innerGridTrack
e innerGridDarkTrack
. Ao definir apenas o
innerGridTrack
, o gráfico calcula uma cor mais escura para o
innerGridDarkTrack
, mas definindo apenas o innerGridDarkTrack
, o
innerGridTrack
usa a cor padrão e não calcula uma cor mais clara.
var options = { height: 275, gantt: { criticalPathEnabled: false, innerGridHorizLine: { stroke: '#ffe0b2', strokeWidth: 2 }, innerGridTrack: {fill: '#fff3e0'}, innerGridDarkTrack: {fill: '#ffcc80'} } };
Carregando
O nome do pacote google.charts.load
é "gantt"
.
google.charts.load("current", {packages: ["gantt"]});
O nome da classe do layout é google.visualization.Gantt
.
var chart = new google.visualization.Gantt(container);
Formato de dados
Linhas: cada linha da tabela representa uma tarefa.
Columns:
Coluna 0 | Coluna 1 | Coluna 2 | Coluna 3 | Coluna 4 | Coluna 5 | Coluna 6 | Coluna 7 | |
---|---|---|---|---|---|---|---|---|
Finalidade: | ID da tarefa | Nome da tarefa | ID do recurso (opcional) | Iniciar | End | Duração (em milissegundos) | Percentual de conclusão | Dependências |
Tipo de dado: | string | string | string | date | date | number | number | string |
Papel: | domínio | dados | dados | dados | dados | dados | dados | dados |
Opções de configuração
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
backgroundColor.fill | string | "branco" | A cor de preenchimento do gráfico, como uma string de cor HTML. |
Gantt.arrow | um objeto | null |
Em Gráficos de Gantt, gantt.arrow controla as várias propriedades das setas que conectam tarefas.
|
gantt.arrow.angle | number | 45 | O ângulo da cabeça da seta. |
gantt.arrow.color. | string | "#000" | A cor das setas. |
gantt.arrow.length | number | 8 | O comprimento da cabeça da seta. |
gantt.arrow.radius | number | 15 | O raio para definir a curva da seta entre duas tarefas. |
gantt.arrow.spaceAfter | number | 4 | A quantidade de espaços em branco entre a cabeça de uma seta e a tarefa para a qual ela aponta. |
gantt.arrow.width | number | 1.4 | A largura das setas. |
gantt.barCornerRadius | number | 2 | O raio para definir a curva dos cantos de uma barra. |
gantt.barHeight | number | null | A altura das barras das tarefas. |
gantt.crpathPathEnabled | boolean | verdadeiro |
Se true , todas as setas no caminho crítico serão estilizados de forma diferente.
|
gantt.crpathPathStyle | um objeto | null | Um objeto que contém o estilo de quaisquer setas de caminho crítico. |
gantt.crpathPathStyle.stroke | string | null | A cor de todas as setas de caminho crítico. |
gantt.críticaPathStyle.strokeWidth | number | 1.4 | A espessura de todas as setas de caminho crítico. |
gantt.defaultStartDate. | data/número | null |
Se a data de início não puder ser calculada a partir dos valores na tabela de dados, ela será definida de acordo com ela. Aceita um valor de date (new Date(YYYY, M, D) ) ou um
número, que representa a quantidade em milissegundos a ser usada.
|
gantt.innerGridHorizLine | um objeto | null | Define o estilo das linhas horizontais internas da grade. |
gantt.innerGridHorizLine.stroke | string | null | A cor das linhas internas internas da grade. |
gantt.innerGridHorizLine.strokeWidth | number | 1 | A largura das linhas internas da grade horizontal. |
gantt.innerGridTrack.fill | string | null |
A cor de preenchimento da faixa da grade interna. Se nenhum innerGridDarkTrack.fill for especificado, isso será aplicado a todas as faixas da grade.
|
gantt.innerGridDarkTrack.fill | string | null | A cor de preenchimento da faixa de grade interna alternativa. |
gantt.labelMaxWidth | number | 300 | A quantidade máxima de espaço permitido para cada rótulo de tarefa. |
gantt.labelStyle | um objeto | null |
Um objeto que contém os estilos dos rótulos de tarefa. labelStyle: { fontName: Roboto2, fontSize: 14, color: '#757575' }, |
gantt.percentEnabled | boolean | verdadeiro | Preenche a barra de tarefas com base na porcentagem de conclusão da tarefa. |
gantt.percentStyle.fill | string | null | A cor da porcentagem de conclusão de uma barra de tarefas. |
gantt.shadowEnabled | boolean | verdadeiro |
Se definido como true , mostra uma sombra sob cada barra de tarefas que tem dependências.
|
gantt.shadowColor | string | "#000" | Define a cor das sombras em qualquer barra de tarefas com dependências. |
gantt.shadowOffset | number | 1 | Define o deslocamento, em pixels, das sombras em qualquer barra de tarefas com dependências. |
gantt.sortTasks | boolean | verdadeiro | Especifica que as tarefas serão classificadas topologicamente, se verdadeiras. Caso contrário, use a mesma ordem das linhas correspondentes da DataTable. |
gantt.trackHeight | number | null | É a altura das faixas. |
largura | number | largura do elemento contido | Largura do gráfico, em pixels. |
altura | number | altura do elemento contido | altura do gráfico, em pixels. |
Métodos
Método | Descrição |
---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento Tipo de retorno: nenhum
|
getSelection() |
Retorna uma matriz das entidades do gráfico selecionadas.
Entidades selecionáveis são barras, entradas de legenda e categorias.
Nesse gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno:matriz de elementos de seleção
|
setSelection() |
Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior.
Entidades selecionáveis são barras, entradas de legenda e categorias.
Somente uma entidade pode ser selecionada por vez para este gráfico.
Tipo de retorno: nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno:nenhum
|
Eventos
Evento | Descrição |
---|---|
click |
Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legendas, os eixos, as linhas de grade ou os rótulos são clicados. Propriedades: targetID.
|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Propriedades:ID e mensagem
|
ready |
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: nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Propriedades: nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.