Grafici Gantt

Panoramica

Un grafico di Gartt è un tipo di grafico che illustra la suddivisione di un progetto nelle attività dei componenti. I grafici di Google Gantt illustrano l'inizio, la fine e la durata delle attività in un progetto, nonché le eventuali dipendenze che un'attività potrebbe avere. I grafici di Google Gantt vengono visualizzati nel browser utilizzando SVG. Come per tutti i grafici di Google, i grafici di Gantt mostrano le descrizioni comando quando l'utente passa il mouse sopra i dati.

Nota: i grafici di Gantt non funzioneranno nelle versioni precedenti di Internet Explorer. IE8 e le versioni precedenti non supportano SVG, richiesto dai grafici 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 della DataTable 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 tuoi 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 verranno 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>

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 è prevista 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 fornite sia la data di inizio sia quella 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 diverse circostanze.

Inizia Fine Durata Il risultato
Presenta Presenta Presenta Verifica che la durata sia coerente con l'ora di inizio e di fine. Genera un errore in caso di differenze.
Presenta Presenta Null Calcola la durata dalle ore di inizio e fine.
Presenta Null Presenta Calcola l'ora di fine.
Presenta Null Null Genera un errore poiché non è possibile calcolare la durata o l'ora di fine.
Null Presenta Presenta Ora di inizio del calcolo.
Null Null Presenta Calcola l'ora di inizio in base alle dipendenze. Se abbinato a defaultStartDate, disegna il grafico utilizzando solo le durate.
Null Presenta Null Genera un errore poiché non è possibile calcolare l'ora di inizio o la durata.
Null Null Null Genera un errore poiché non è possibile calcolare l'ora di inizio, l'ora di fine o la durata.

Tenendo presente quanto sopra, puoi creare un grafico che illustra il 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. Il percorso critico nei grafici di Google Gantt è 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 dello stile

Puoi assegnare uno stile alle frecce delle dipendenze tra le attività utilizzando le opzioni di 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
            }
          }
        };

Stili di tracce

Lo stile della griglia è gestito da una combinazione di innerGridHorizLine, innerGridTrack e innerGridDarkTrack. Se imposti solo innerGridTrack, il grafico calcolerà un colore più scuro per innerGridDarkTrack, ma se imposti solo innerGridDarkTrack, innerGridTrack userà il colore predefinito e non accetterà un colore più chiaro. 

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

Caricamento

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
Finalità: ID attività Nome attività ID risorsa (facoltativo) Inizia Fine Durata (in millisecondi) Percentuale completata Dipendenze
Tipo di dati: string string string date date number number string
Ruolo: dominio dati dati dati dati dati dati dati

 

Opzioni di configurazione

Nome Tipo Predefinito Descrizione
sfondocolore.fill string "bianco" Il colore di riempimento del grafico, come stringa del colore HTML.
gantt.arrow oggetto null Per Grafici Gantt, gantt.arrow controlla le varie proprietà delle frecce che collegano le attività.
gantt.arrow.angle number 45 L'angolazione della punta della freccia.
colore.gantt.colore string "#000" Il colore delle frecce.
gantt.arrow.length number 8 La lunghezza della punta della freccia.
gantt.arrow.beam number 15 Il raggio per definire la curva della freccia tra due attività.
gantt.arrow.spaceAfter number 4 La quantità di spazio vuoto tra la punta di una freccia e l'attività a cui rimanda.
gantt.arrow.width number 1.4 La larghezza delle frecce.
gantt.barCornerRadius number 2 Il raggio per definire la curva degli angoli di una barra.
gantt.barHeight number null L'altezza delle barre per le attività.
gantt.criticalPathEnabled boolean true Se true, le frecce del percorso critico avranno uno stile diverso.
gantt.criticalPathStyle oggetto null Un oggetto contenente lo stile per le frecce critiche del percorso.
gantt.criticalPathStyle.tratto string null Il colore di eventuali frecce del percorso critiche.
gantt.criticalPathStyle.WidthWidth number 1.4 Lo spessore delle eventuali frecce del percorso fondamentali.
Data Gantt.defaultStartDate data/numero null Se la data di inizio non può essere calcolata dai valori nella tabella Data, verrà impostata su questa data. Accetta un valore date (new Date(YYYY, M, D)) o un numero, ovvero il numero di millisecondi da utilizzare.
gantt.innerGridHorizLine oggetto null Definisce lo stile delle linee della griglia orizzontale interna.
gantt.innerGridHorizLine.rai string null Il colore delle linee della griglia orizzontale interna.
gantt.innerGridHorizLine.rushWidth number 1 La larghezza delle linee orizzontali della griglia.
gantt.innerGridTrack.fill string null Il colore di riempimento della traccia interna della griglia. Se innerGridDarkTrack.fill non è specificato, questo verrà applicato a ogni traccia della griglia.
gantt.innerGridDarkTrack.fill string null Il colore di riempimento della traccia della griglia interna scura alternativa.
gantt.labelmaxWidth number 300 La quantità massima di spazio consentita per ogni etichetta di 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 Riempie la barra delle attività in base alla percentuale di completamento dell'attività.
gantt.percentStyle.fill string null Il colore della percentuale di completamento di una barra delle attività.
gantt.shadowEnabled boolean true Se impostato su true, disegna un'ombra sotto ogni barra delle attività che ha dipendenze.
Gantt.shadowColor string "#000" Definisce il colore delle ombre sotto qualsiasi barra delle applicazioni che ha dipendenze.
gantt.shadowOffset number 1 Definisce l'offset, in pixel, delle ombre in qualsiasi barra delle applicazioni che ha dipendenze.
gantt.sortTasks boolean true Specifica che le attività devono essere ordinate topologicamente, se true; altrimenti utilizza lo stesso ordine delle righe corrispondenti della DataTable.
gantt.trackHeight number null L'altezza delle tracce.
width number larghezza dell'elemento contenitore La larghezza del grafico in pixel.
height number altezza dell'elemento contenitore altezza del grafico, in pixel.

Metodi

Metodo Descrizione
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento ready. Extended description.

Tipo di reso: nessuno
getSelection()

Restituisce una matrice delle entità del grafico selezionate. Le entità selezionabili sono barre, legende e categorie. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description.

Tipo di reso: array di elementi di selezione
setSelection()

Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente. Le entità selezionabili sono barre, legende 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 gli utenti fanno clic su titolo, elementi dati, voci di legenda, assi, linee di 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 ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo draw e di chiamarlo solo dopo che è stato attivato l'evento.

Proprietà: nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero getSelection().

Proprietà: nessuna

Norme sui dati

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