Gantt-Charts

Übersicht

Ein Gantt-Diagramm ist eine Art von Diagramm, das die Aufschlüsselung eines Projekts in seine Komponentenaufgaben veranschaulicht. Google Gantt-Diagramme veranschaulichen den Beginn, 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 mit SVG gerendert. Wie bei allen Google-Diagrammen werden auch bei Gantt-Diagrammen Kurzinfos angezeigt, wenn der Nutzer den Mauszeiger auf die Daten bewegt.

Hinweis: Gantt-Diagramme funktionieren in alten Versionen von Internet Explorer nicht. (IE8 und frühere Versionen unterstützen kein SVG, das für Gantt Charts 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

Wenn Sie ein Gantt-Diagramm ohne Abhängigkeiten erstellen möchten, muss der letzte Wert für jede Zeile in der Datentabelle auf null gesetzt sein. 

<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 ähnlicher Art können mithilfe von Ressourcen gruppiert werden. Fügen Sie Ihren Daten eine Spalte vom Typ string hinzu (nach den Spalten Task ID und Task Name) 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 es beispielsweise kein Startdatum gibt, kann die fehlende Zeit im Diagramm anhand des Enddatums und der Dauer berechnet werden. Dasselbe gilt für die Berechnung des Enddatums. Wenn sowohl das Start- als auch das Enddatum angegeben sind, kann die Dauer zwischen diesen beiden Werten berechnet werden.

Die folgende Tabelle enthält eine Liste dazu, wie Gantt das Vorhandensein von Start, Ende und Dauer unter verschiedenen Umständen verarbeitet.

Starten Beenden Dauer Folge
Präsentieren Präsentieren Präsentieren Die Dauer muss mit den Start- und Endzeiten übereinstimmen. Gibt bei Inkonsistenz einen Fehler aus.
Präsentieren Präsentieren Null Berechnet die Dauer ab Start- und Endzeit.
Präsentieren Null Präsentieren Berechnet die Endzeit.
Präsentieren Null Null Gibt den Fehler aus, weil die Dauer oder das Ende nicht berechnet werden können.
Null Präsentieren Präsentieren Berechnet die Startzeit.
Null Null Präsentieren Berechnet die Startzeit basierend auf Abhängigkeiten. In Verbindung mit defaultStartDate ermöglicht dies, dass Diagramme nur mit Zeiträumen gezeichnet werden können.
Null Präsentieren Null Gibt den Fehler aus, da die Startzeit oder Dauer nicht berechnet werden kann.
Null Null Null Gibt den Fehler aus, weil der Beginn, das Ende oder die Dauer nicht berechnet werden können.

Unter Berücksichtigung der oben genannten Punkte können Sie ein Diagramm erstellen, das den typischen Arbeitsweg zur Arbeit darstellt und nur die Dauer der einzelnen Aufgaben verwendet. 

<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 eingefärbt und kann mit den Optionen criticalPathStyle 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
            }
          }
        };

Pfeile gestalten

Mit den Optionen für gantt.arrow können Sie die Abhängigkeitspfeile zwischen Aufgaben 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
            }
          }
        };

Stile für Titel festlegen

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

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

Wird geladen

Der Paketname „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 in der Tabelle steht für eine 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 Beenden Dauer (in Millisekunden) Prozent gelesen Abhängigkeiten
Datentyp: String String String date date number number String
Rolle: Domain Daten Daten Daten Daten Daten Daten Daten

 

Konfigurationsoptionen

Name Typ Standard Beschreibung
backgroundColor.fill String 'white' Die Füllfarbe des Diagramms als HTML-Farbstring.
gantt.arrow Objekt null Bei Gantt-Diagrammen steuert gantt.arrow die verschiedenen Eigenschaften der Pfeile, die Aufgaben verbinden.
gantt.arrow.angle number 45 Der Winkel des Pfeilkopfes.
gantt.arrow.color String „#000“ Die Farbe der Pfeile.
gantt.arrow.length number 8 Die Länge der Pfeilspitze.
gantt.arrow.radius number 15 Der Radius zum Definieren der Kurve des Pfeils zwischen zwei Aufgaben.
gantt.arrow.spaceAfter number 4 Der Leerraum zwischen der Spitze eines Pfeils und der Aufgabe, auf die er zeigt.
gantt.arrow.width number 1,4 Die Breite der Pfeile.
gantt.barCornerRadius number 2 Der Radius, mit dem die Kurve der Ecken eines Balkens definiert wird.
gantt.barHeight number null Die Höhe der Balken für Aufgaben.
gantt.criticalPathEnabled boolean true Wenn true, werden Pfeile im kritischen Pfad anders formatiert.
gantt.criticalPathStyle Objekt null Ein Objekt, das den Stil für alle Pfeile bei kritischen Pfaden enthält.
gantt.criticalPathStyle.stroke String null Die Farbe der Pfeile für kritische Pfade.
gantt.criticalPathStyle.strokeWidth number 1,4 Die Stärke der Pfeile bei kritischen Pfaden.
gantt.defaultStartDate Datum/Zahl null Wenn das Startdatum nicht aus den Werten in der DataTable berechnet werden kann, wird das Startdatum auf dieses Datum 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.stroke String null Die Farbe der inneren horizontalen Rasterlinien.
gantt.innerGridHorizLine.strokeWidth number 1 Breite der inneren horizontalen Rasterlinien.
gantt.innerGridTrack.fill String null Die Füllfarbe des inneren Rasterspurs. Wenn kein innerGridDarkTrack.fill angegeben ist, wird dies auf jede Rasterspur angewendet.
gantt.innerGridDarkTrack.fill String null Die Füllfarbe des alternativen, dunklen inneren Rasterspurs.
gantt.labelMaxWidth number 300 Der maximal zulässige Platz für jedes Aufgabenlabel.
gantt.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 basierend auf dem Prozentsatz der erledigten Aufgaben aus.
gantt.percentStyle.fill String null Die Farbe des Teils der Fertigstellung in Prozent einer Taskleiste.
gantt.shadowEnabled boolean true Wenn true festgelegt ist, wird ein Schatten unter jede Taskleiste mit Abhängigkeiten gezeichnet.
gantt.shadowColor String „#000“ Definiert die Farbe der Schatten unter jeder Taskleiste, die Abhängigkeiten hat.
gantt.shadowOffset number 1 Definiert den Abstand der Schatten unter einer beliebigen Taskleiste mit Abhängigkeiten in Pixeln.
gantt.sortTasks boolean true Gibt an, dass die Aufgaben topologisch sortiert werden sollen, wenn dies auf „true“ gesetzt ist. Verwenden Sie andernfalls dieselbe Reihenfolge wie die entsprechenden Zeilen der DataTable.
gantt.trackHeight number null Die Höhe der Tracks.
width number Breite des beinhaltenden Elements Breite des Diagramms in Pixeln.
height number Höhe des beinhaltenden Elements Höhe des Diagramms in Pixeln.

Methoden

Method Beschreibung
draw(data, options)

Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis ready ausgelöst wurde. Extended description.

Return Type: Kein
getSelection()

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

Rückgabetyp:Array von Auswahlelementen
setSelection()

Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl. Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Return Type: Kein
clearChart()

Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei.

Return Type: Kein

Ereignisse

Veranstaltung Beschreibung
click

Wird ausgelöst, wenn der Nutzer auf das Diagramm klickt Damit können Sie feststellen, wann auf Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird.

Eigenschaften: targetID
error

Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt.

Properties (Eigenschaften): id, message, message
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Der Aufruf muss erst erfolgen, nachdem das Ereignis ausgelöst wurde.

Properties:keine
select

Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie getSelection() auf.

Properties:keine

Datenrichtlinie

Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.