甘特圖騰

總覽

「甘特圖」是一種圖表，會呈現專案組成部分工作的詳細內容。Google 甘特圖說明專案內工作的開始、結束和持續時間，以及工作可能存在的任何依附元件。Google 甘特圖是使用 SVG 在瀏覽器中呈現。如同所有 Google 圖表，當使用者將遊標懸停在資料上，甘特圖表就會顯示工具提示。

注意：「無法」在舊版 Internet Explorer 中使用甘特圖。(IE8 以下版本不支援 SVG，Gantt Chart 需要)。

簡易範例

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

沒有依附元件

如要建立沒有依附元件的甘特圖，請確認資料表中每一列的最後一個值已設為 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>

將資源分組

性質類似的工作可以使用資源歸為一組。在資料中新增 string 類型的資料欄 (在 Task ID 和 Task Name 資料欄後方)，並確認應分組至特定資源的所有工作都具有相同的資源 ID。資源會按照顏色分組。

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

計算開始/結束/時間長度

甘特圖可接受三個與任務持續時間相關的值：開始日期、結束日期，以及持續時間 (以毫秒為單位)。例如，在沒有開始日期的情況下，圖表可根據結束日期和持續時間來計算缺少的時間。計算結束日期時也是如此。如果同時指定開始和結束日期，系統可就兩者之間的時間長度計算期間。

請參閱下表，瞭解 Gantt 如何在不同情況下處理開始、結束和持續時間的存在。

啟動 結束 課程時長 結果
顯示簡報 顯示簡報 顯示簡報 確認時間長度與開始/結束時間一致。如果不一致，就會擲回錯誤。
顯示簡報 顯示簡報 零值 計算從開始與結束時間起算的持續時間。
顯示簡報 零值 顯示簡報 計算結束時間。
顯示簡報 零值 零值 擲回無法計算時間長度或結束時間的錯誤。
零值 顯示簡報 顯示簡報 運算開始時間。
零值 零值 顯示簡報 根據依附元件計算運算開始時間。搭配 defaultStartDate 使用時，即可只使用時間長度繪製圖表。
零值 顯示簡報 零值 擲回無法計算開始時間或時間長度的錯誤。
零值 零值 零值 擲回錯誤，無法計算開始時間、結束時間或時間長度。

瞭解上述事項後，您可以建立圖表來規劃一般通勤路線，並只用每項工作的持續時間。 

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

關鍵路徑

甘特圖中的「重要路徑」是直接影響結束日期的路徑或路徑。在 Google 甘特圖中的重要路徑預設為紅色，您可以使用 criticalPathStyle 選項自訂該路徑。您也可以停用重要路徑，只要將 criticalPathEnabled 設為 false 即可。

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

樣式箭頭

您可以使用 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
            }
          }
        };

樣式音軌

格線樣式是由 innerGridHorizLine、innerGridTrack 和 innerGridDarkTrack 的組合處理。只設定 innerGridTrack 時，圖表會為 innerGridDarkTrack 計算較深的顏色，但只設定 innerGridDarkTrack，innerGridTrack 就會使用預設顏色，不會計算較淺的顏色。 

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

載入中

google.charts.load 套件名稱為 "gantt"。

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

視覺呈現的類別名稱為 google.visualization.Gantt。

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

資料格式

列：表格中的每一列都代表一項工作。

資料欄：

  第 0 欄 第 1 欄 第 2 欄 第 3 欄 第 4 欄 第 5 欄 第 6 欄 第 7 欄
用途： 工作 ID 工作名稱 資源 ID (選填) 啟動 結束 時間長度 (以毫秒為單位) 已完成百分比 依附元件
資料類型： 字串 字串 字串 日期 日期 號碼 號碼 字串
角色： 網域 資料 資料 資料 資料 資料 資料 資料

 

設定選項

名稱 類型 預設 說明
backgroundColor.fill 字串 「white」 圖表填滿顏色，以 HTML 顏色字串表示。
gantt.arrow 物件 null 在甘特圖中，gantt.arrow 控制了連結任務的箭頭的各種屬性。
gantt.arrow.angle 號碼 45 箭頭的頭角。
gantt.arrow.color 字串 「#000」 箭頭的顏色。
gantt.arrow.length 號碼 8 箭頭的頭長度。
gantt.arrow.radius 號碼 15 定義兩個工作之間箭頭曲線的半徑。
gantt.arrow.spaceAfter 號碼 4 箭頭的標題與指向的工作之間的空白空間大小。
gantt.arrow.width 號碼 1.4 箭頭的寬度。
gantt.barCornerRadius 號碼 2 定義長條圓角曲線的半徑。
gantt.barHeight 號碼 null 工作長條的高度。
gantt.criticalPathEnabled boolean true 如果重要路徑上的 true 任何箭頭，樣式就會有所不同。
gantt.criticalPathStyle 物件 null 包含所有重要路徑箭頭樣式的物件。
gantt.criticalPathStyle.stroke 字串 null 任何關鍵路徑箭頭的顏色。
gantt.criticalPathStyle.strokeWidth 號碼 1.4 任何關鍵路徑箭頭的粗細。
gantt.defaultStartDate 日期/數字 null 如果無法根據 DataTable 中的值計算開始日期，系統會將開始日期設為這個值。接受 date 值 (new Date(YYYY, M, D)) 或數字，此為使用的毫秒數。
gantt.innerGridHorizLine 物件 null 定義內部水平格線的樣式。
gantt.innerGridHorizLine.stroke 字串 null 內水平格線的顏色。
gantt.innerGridHorizLine.strokeWidth 號碼 1 內部水平格線的寬度。
gantt.innerGridTrack.fill 字串 null 內部格線軌跡的填滿顏色。如未指定 innerGridDarkTrack.fill，就會套用至所有格線軌。
gantt.innerGridDarkTrack.fill 字串 null 替代黑色內格軌跡的填滿顏色。
gantt.labelMaxWidth 號碼 300 每個工作標籤允許的空間上限。
gantt.labelStyle 物件 null

包含工作標籤樣式的物件。

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true 根據工作完成的百分比填入工作列。
gantt.percentStyle.fill 字串 null 工作列的已完成百分比部分顏色。
gantt.shadowEnabled boolean true 如果設為 true，則會在每個具有依附元件的工作列下方繪製陰影。
gantt.shadowColor 字串 「#000」 在任何具有依附元件的工作列中，定義陰影顏色。
gantt.shadowOffset 號碼 1 定義任何具備依附元件的工作列下陰影的偏移值 (以像素為單位)。
gantt.sortTasks boolean true 指定工作應採用頂端排序 (如果為 true)，否則請使用與 DataTable 的對應資料列相同的順序。
gantt.trackHeight 號碼 null 軌跡的高度。
寬度 號碼 所含元素的寬度 圖表的寬度，以像素為單位。
高度 號碼 所含元素的高度 以像素為單位的圖表高度。

方法

方法 說明
draw(data, options)

繪製圖表。只有在觸發 ready 事件後，圖表才能接受其他方法呼叫。Extended description。

傳回類型：無
getSelection()

傳回所選圖表實體的陣列。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，無論何時都只能選取一個實體。 Extended description 。

傳回類型：選取元素的陣列
setSelection()

選取指定的圖表實體。取消先前選取的任何項目。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，一次只能選取一個實體。 Extended description 。

傳回類型：無
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無

事件

活動 說明
click

使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。

屬性： targetID
error

嘗試算繪圖表時發生錯誤時觸發。

屬性：ID、訊息
ready

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無
select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。