Ü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 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.
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.
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 Eigenschaften:Keine
|
select |
Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie Eigenschaften:Keine
|
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.