Grafici di Gantt

Panoramica

Un grafico di Gantt è un tipo di grafico che illustra la suddivisione di un progetto nelle sue attività di componente. I grafici di Gantt di Google illustrano l'inizio, la fine e la durata delle attività all'interno di un progetto, nonché le eventuali dipendenze di un'attività. Il rendering dei grafici di Gantt di Google viene eseguito nel browser utilizzando SVG. Come tutti i grafici Google, i grafici di Gantt mostrano descrizioni comando quando l'utente passa il mouse sopra i dati.

Nota. I diagrammi di Gantt non funzionano nelle versioni precedenti di Internet Explorer. IE8 e le versioni precedenti non supportano il formato SVG richiesto dai diagrammi di Gantt.

Esempio semplice

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

Nessuna dipendenza

Per creare un grafico di Gantt senza dipendenze, assicurati che l'ultimo valore di ogni riga nella tabella di dati sia impostato su 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>

Raggruppare le risorse

Le attività di natura simile possono essere raggruppate utilizzando le risorse. Aggiungi una colonna di tipo string ai dati (dopo le colonne Task ID e Task Name) e assicurati che tutte le attività che devono essere raggruppate in una risorsa abbiano lo stesso ID risorsa. Le risorse saranno raggruppate per colore. 

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

Calcolo di inizio/fine/durata

I grafici di Gantt accettano tre valori relativi alla durata dell'attività: una data di inizio, una data di fine e una durata (in millisecondi). Se, ad esempio, non esiste una data di inizio, il grafico può calcolare l'ora mancante in base alla data di fine e alla durata. Lo stesso vale per il calcolo della data di fine. Se vengono indicate sia la data di inizio sia la data di fine, la durata può essere calcolata tra le due.

Consulta la tabella seguente per un elenco di come Gantt gestisce la presenza di inizio, fine e durata in circostanze diverse.

Inizia Fine Durata Risultato
Presenta Presenta Presenta Verifica che la durata sia coerente con l'ora di inizio e di fine. Genera un errore se incoerente.
Presenta Presenta Null Calcola la durata a partire dall'ora di inizio e di fine.
Presenta Null Presenta Calcola l'ora di fine.
Presenta Null Null Genera un errore perché non è possibile calcolare la durata o l'ora di fine.
Null Presenta Presenta Calcola l'ora di inizio.
Null Null Presenta Calcola l'ora di inizio in base alle dipendenze. Se combinato con defaultStartDate, consente di disegnare grafici utilizzando solo le durate.
Null Presenta Null Genera un errore perché non è possibile calcolare l'ora di inizio o la durata.
Null Null Null Genera un errore perché non è possibile calcolare l'ora di inizio, l'ora di fine o la durata.

Tenendo presente quanto riportato sopra, puoi creare un grafico che traccia un tipico tragitto giornaliero per andare al lavoro utilizzando solo la durata di ogni attività. 

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

Percorso critico

Il percorso critico in un grafico di Gantt è il percorso, o i percorsi, che influiscono direttamente sulla data di fine. Per impostazione predefinita, il percorso critico nei grafici di Gantt di Google è di colore rosso e può essere personalizzato utilizzando le opzioni criticalPathStyle. Puoi anche disattivare il percorso critico impostando criticalPathEnabled su false. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

Frecce per lo stile

Puoi definire lo stile delle frecce delle dipendenze tra le attività con le opzioni 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
            }
          }
        };

Stilizzare le tracce

Lo stile della griglia viene gestito da una combinazione di innerGridHorizLine, innerGridTrack e innerGridDarkTrack. Impostando solo il innerGridTrack, il grafico calcolerà un colore più scuro per innerGridDarkTrack, ma impostando solo il innerGridDarkTrack, il innerGridTrack utilizzerà il suo colore predefinito e non calcolerà un colore più chiaro. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

Caricamento in corso...

Il nome del pacchetto google.charts.load è "gantt". 

  google.charts.load("current", {packages: ["gantt"]});

Il nome della classe della visualizzazione è google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

Formato dei dati

Righe:ogni riga della tabella rappresenta un'attività.

Colonne:

  Colonna 0 Colonna 1 Colonna 2 Colonna 3 Colonna 4 Colonna 5 Colonna 6 Colonna 7
Scopo: ID attività Nome attività (Facoltativo) ID risorsa Inizia Termina Durata (in millisecondi) Percentuale di completamento Dipendenze
Tipo di dati: stringa stringa stringa date date numero numero stringa
Ruolo: dominio dati dati dati dati dati dati dati

 

Opzioni di configurazione

Nome Tipo Predefinita Descrizione
backgroundColor.fill stringa 'white' (bianco) Il colore di riempimento del grafico, come stringa di colore HTML.
gantt.arrow oggetto null Per i grafici di Gantt, gantt.arrow controlla le varie proprietà delle frecce che collegano le attività.
gantt.arrow.angle numero 45 L'angolazione della testa della freccia.
gantt.arrow.color stringa "#000" Il colore delle frecce.
gantt.arrow.length numero 8 La lunghezza della punta della freccia.
gantt.arrow.radius numero 15 Il raggio per definire la curva della freccia tra due attività.
gantt.arrow.spaceAfter numero 4 La quantità di spazio vuoto tra la punta di una freccia e l'attività a cui punta.
gantt.arrow.width numero 1,4 La larghezza delle frecce.
gantt.barCornerRadius numero 2 Il raggio per definire la curva degli angoli di una barra.
gantt.barHeight numero null L'altezza delle barre per le attività.
gantt.criticalPathEnabled boolean true Se true frecce sul percorso critico avranno uno stile diverso.
gantt.criticalPathStyle oggetto null Un oggetto contenente lo stile di eventuali frecce del percorso critiche.
gantt.criticalPathStyle.stroke stringa null Il colore di eventuali frecce del percorso critico.
gantt.criticalPathStyle.strokeWidth numero 1,4 Lo spessore delle frecce del percorso critiche.
gantt.defaultStartDate data/numero null Se non è possibile calcolare la data di inizio utilizzando i valori della tabella di dati, la data di inizio verrà impostata su questa. Accetta un valore date (new Date(YYYY, M, D)) o un numero, che rappresenta il numero di millisecondi da utilizzare.
gantt.innerGridHorizLine oggetto null Definisce lo stile delle linee interne della griglia orizzontale.
gantt.innerGridHorizLine.stroke stringa null Il colore delle linee interne della griglia orizzontale.
gantt.innerGridHorizLine.strokeWidth numero 1 La larghezza delle linee interne della griglia orizzontale.
gantt.innerGridTrack.fill stringa null Il colore di riempimento della traccia griglia interna. Se non viene specificato alcun valore innerGridDarkTrack.fill, questo verrà applicato a ogni traccia della griglia.
gantt.innerGridDarkTrack.fill stringa null Il colore di riempimento della traccia alternativa scura della griglia interna.
gantt.labelMaxWidth numero 300 La quantità massima di spazio consentita per ogni etichetta dell'attività.
gantt.labelStyle oggetto null

Un oggetto contenente gli stili per le etichette delle attività.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true Compila la barra delle applicazioni in base alla percentuale di completamento dell'attività.
gantt.percentStyle.fill stringa null Il colore della parte della percentuale di completamento di una barra delle applicazioni.
gantt.shadowEnabled boolean true Se impostato su true, disegna un'ombra sotto ogni barra delle applicazioni con dipendenze.
gantt.shadowColor stringa "#000" Definisce il colore delle ombre sotto qualsiasi barra delle applicazioni con dipendenze.
gantt.shadowOffset numero 1 Definisce l'offset, in pixel, delle ombre in qualsiasi barra delle applicazioni con dipendenze.
gantt.sortTasks boolean true Specifica che le attività devono essere ordinate in modo topologico, se vero, altrimenti utilizza lo stesso ordine delle righe corrispondenti della tabella di dati.
gantt.trackHeight numero null L'altezza dei binari.
larghezza numero larghezza dell'elemento contenitore Larghezza del grafico, in pixel.
altezza numero dell'elemento contenitore dell'altezza del grafico, in pixel.

Metodi

Metodo Descrizione
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono barre, voci di legenda e categorie. Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

Tipo restituito: array di elementi di selezione
setSelection()

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono barre, voci di legenda e categorie. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno

Eventi

Evento Descrizione
click

Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando viene fatto clic su titolo, elementi di dati, voci della legenda, assi, linee della griglia o etichette.

Proprietà:targetID
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.