Gantt-Diagramme

Übersicht

Ein Gantt-Diagramm ist eine Art Diagramm, das die Aufschlüsselung eines Projekts in seine Komponentenaufgaben veranschaulicht. Google Gantt-Diagramme veranschaulichen den Anfang, das Ende und die Dauer von Aufgaben in einem Projekt sowie alle Abhängigkeiten, die eine Aufgabe haben kann. Google Gantt-Diagramme werden im Browser mithilfe von SVG gerendert. Wie bei allen Google-Diagrammen werden in Gantt-Diagrammen Kurzinfos angezeigt, wenn der Nutzer den Mauszeiger auf die Daten bewegt.

Hinweis: Gantt-Diagramme funktionieren in älteren Versionen des Internet Explorer nicht. In Internet Explorer 8 und früheren Versionen wird SVG nicht unterstützt, was für Gantt-Diagramme erforderlich ist.

Ein einfaches Beispiel

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

Keine Abhängigkeiten

Achten Sie beim Erstellen eines Gantt-Diagramms ohne Abhängigkeiten darauf, dass für jede Zeile der DataTable der letzte Wert auf null festgelegt ist.

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

Ressourcen gruppieren

Aufgaben mit ähnlichen Aufgaben können mithilfe von Ressourcen gruppiert werden. Fügen Sie Ihren Daten nach den Spalten Task ID und Task Name eine Spalte vom Typ string hinzu und achten Sie darauf, dass alle Aufgaben, die in einer Ressource gruppiert werden sollen, dieselbe Ressourcen-ID haben. Ressourcen werden nach Farbe gruppiert.

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

Start/Ende/Dauer berechnen

Gantt-Diagramme akzeptieren drei Werte in Bezug auf die Dauer der Aufgabe: ein Startdatum, ein Enddatum und eine Dauer (in Millisekunden). Wenn beispielsweise kein Startdatum vorhanden ist, kann das Diagramm die fehlende Zeit anhand des Enddatums und der Dauer berechnen. Dasselbe gilt für das Enddatum. Wenn sowohl das Start- als auch das Enddatum angegeben ist, kann die Dauer zwischen den beiden berechnet werden.

In der folgenden Tabelle sehen Sie, wie Gantt unter verschiedenen Umständen mit Start, Ende und Dauer umgeht.

Starten Ende Dauer Ergebnis
Präsentieren Präsentieren Präsentieren Prüfen Sie, ob die Dauer mit der Start- und Endzeit übereinstimmt. Wenn eine Unstimmigkeit auftritt, wird ein Fehler ausgegeben.
Präsentieren Präsentieren Null Berechnet die Start- und Endzeit.
Präsentieren Null Präsentieren Berechnet die Endzeit.
Präsentieren Null Null Ein Fehler wird ausgegeben, da die Dauer oder Endzeit nicht berechnet werden kann.
Null Präsentieren Präsentieren Berechnete Startzeit.
Null Null Präsentieren Berechnet die Startzeit basierend auf Abhängigkeiten. In Verbindung mit defaultStartDate können mit dem Diagramm nur Zeiträume gezeichnet werden.
Null Präsentieren Null Ein Fehler wird ausgegeben, da die Startzeit oder Dauer nicht berechnet werden kann.
Null Null Null Ein Fehler wird ausgegeben, da Beginn, Ende oder Dauer nicht berechnet werden können.

Oben können Sie ein Diagramm erstellen, das den typischen Weg zur Arbeit darstellt und nur die Dauer der einzelnen Aufgaben berücksichtigt.

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

Kritischer Pfad

Der kritische Pfad in einem Gantt-Diagramm ist der oder die Pfade, die sich direkt auf das Enddatum auswirken. Der kritische Pfad in Google Gantt-Diagrammen ist standardmäßig rot und kann mit den criticalPathStyle-Optionen angepasst werden. Sie können den kritischen Pfad auch deaktivieren, indem Sie criticalPathEnabled auf false setzen.

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

Stilpfeile

Sie können die Abhängigkeitspfeile zwischen Aufgaben mit den Optionen gantt.arrow gestalten:

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

Stileisenbahnen

Die Gestaltung des Rasters erfolgt durch eine Kombination aus innerGridHorizLine, innerGridTrack und innerGridDarkTrack. Wenn Sie nur innerGridTrack festlegen, wird im Diagramm eine dunklere Farbe für innerGridDarkTrack berechnet. Wenn Sie nur innerGridDarkTrack festlegen, wird für innerGridTrack die Standardfarbe verwendet und keine hellere Farbe berechnet.

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

Wird geladen

Der Paketname von google.charts.load lautet "gantt".

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

Der Klassenname der Visualisierung lautet google.visualization.Gantt.

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

Datenformat

Zeilen:Jede Zeile der Tabelle entspricht einer Aufgabe.

Columns:

  Spalte 0 Spalte 1 Spalte 2 Spalte 3 Spalte 4 Spalte 5 Spalte 6 Spalte 7
Zweck: Aufgaben-ID Aufgabenname Ressourcen-ID (optional) Starten Ende Dauer (in Millisekunden) Prozentsatz abgeschlossen Abhängigkeiten
Datentyp: String String String date date Zahl Zahl String
Rolle: Domain Daten Daten Daten Daten Daten Daten Daten

 

Konfigurationsoptionen

Name Typ Standard Beschreibung
backgroundColor.fill String 'Weiß' Die Füllfarbe des Diagramms als HTML-Farbstring.
Gantt Objekt null Bei Gantt-Diagrammen steuert gantt.arrow die verschiedenen Eigenschaften der Pfeile, die Aufgaben verbinden.
Ggantt.arrow.angle Zahl 45 Der Winkel des Kopfes des Pfeils.
Ggantt.arrow.color String „#000“ Die Farbe der Pfeile.
Gantt.arrow.length Zahl 8 Länge des Pfeils
Ggantt.arrow.radius Zahl 15 Der Radius zum Definieren der Kurve des Pfeils zwischen zwei Aufgaben.
Ggantt.arrow.spaceAfter Zahl 4 Der Abstand zwischen dem Kopf eines Pfeils und der Aufgabe, auf die er verweist.
Gantt.arrow.width Zahl 1.4 Die Breite der Pfeile.
gantt.barCornerRadius Zahl 2 Der Radius zum Definieren der Kurvenecke.
Gantt.barHeight Zahl null Die Höhe der Balken für Aufgaben.
Ggantt.CriticalPathEnabled boolean true Wenn true, werden Pfeile im kritischen Pfad anders formatiert.
Ggantt.CriticalPathStyle Objekt null Ein Objekt, das den Stil für kritische Pfadpfeile enthält.
gantt.CriticalPathStyle.strich String null Die Farbe aller kritischen Pfadpfeile.
gantt.CriticalPathStyle.StrikeWidth Zahl 1.4 Die Dicke aller kritischen Pfadpfeile.
Ggantt.defaultStartDate Datum/Nummer null Wenn das Startdatum nicht aus den Werten in der DataTable berechnet werden kann, wird das Startdatum auf diesen Wert festgelegt. Akzeptiert einen date-Wert (new Date(YYYY, M, D)) oder eine Zahl, die die Anzahl der zu verwendenden Millisekunden angibt.
Gantt.innerGridHorizLine Objekt null Definiert den Stil der inneren horizontalen Rasterlinien.
gantt.innerGridHorizLine.Streich String null Die Farbe der inneren horizontalen Rasterlinien.
gantt.innerGridHorizLine.strichBreite Zahl 1 Die Breite der inneren horizontalen Rasterlinien.
gantt.innerGridTrack.fill String null Die Füllfarbe des inneren Rasters. Wenn keine innerGridDarkTrack.fill angegeben ist, wird diese auf jeden Raster-Track angewendet.
gantt.innerGridDarkTrack.fill String null Die Füllfarbe der alternativen, dunklen inneren Rasterspur.
gantt.labelMaxWidth Zahl 300 Der maximal zulässige Platz für jedes Aufgabenlabel.
Ghantt.labelStyle Objekt null

Ein Objekt, das die Stile für Aufgabenlabels enthält.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
      
gantt.percentEnabled boolean true Füllt die Taskleiste anhand des abgeschlossenen Prozentsatzes der Aufgabe aus.
Ggantt.percentStyle.fill String null Die Farbe des abgeschlossenen Prozentsatzes einer Taskleiste.
Ggantt.shadowEnabled boolean true Wenn true festgelegt ist, wird ein Schatten unter jeder Taskleiste mit Abhängigkeiten gezeichnet.
Ggantt.ShadeColor String „#000“ Definiert die Farbe der Schatten unter einer Taskleiste mit Abhängigkeiten.
gantt.shadowOffset Zahl 1 Definiert den Abstand in Pixeln der Schatten unter einer Taskleiste, die Abhängigkeiten hat.
Gantt.sortTasks boolean true Gibt an, dass die Aufgaben toposortiert werden sollen, wenn wahr; andernfalls die gleiche Reihenfolge wie die entsprechenden Zeilen der DataTable verwenden.
Ggantt.trackHeight Zahl null Die Höhe der Tracks.
width Zahl Breite des beinhaltenden Elements Breite des Diagramms in Pixeln.
height Zahl Höhe des beinhaltenden Elements Höhe des Diagramms in Pixeln.

Methoden

Method Beschreibung
draw(data, options)

Zeichnet das Diagramm. Im Diagramm sind weitere Methodenaufrufe erst möglich, nachdem das Ereignis ready ausgelöst wurde. Extended description

Rückgabetyp: Keine
getSelection()

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Elemente sind Balken, Einträge in Legenden und Kategorien. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description.

Rückgabetyp:Array von Auswahlelementen
setSelection()

Die angegebenen Diagrammentitäten werden ausgewählt. Die vorherige Auswahl wird abgebrochen. Auswählbare Elemente sind Balken, Einträge in Legenden und Kategorien. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description.

Rückgabetyp: Keine
clearChart()

Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei.

Rückgabetyp: Keine

Ereignisse

Veranstaltung Beschreibung
click

Wird ausgelöst, wenn der Nutzer in das Diagramm klickt Kann verwendet werden, um zu erkennen, wann auf den Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird.

Eigenschaften: targetID
error

Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt

Eigenschaften: ID, Nachricht
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde.

Eigenschaften:Keine
select

Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde.

Eigenschaften:Keine

Datenrichtlinie

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.