antant Chart

簡介

Gantt 圖表是一種圖表，用於說明專案細分成元件。Google Gantt 圖表說明專案中工作的開始、結束、持續時間，以及工作可能具有的任何依附元件。Google Gantt 圖表使用 SVG 在瀏覽器中顯示。與所有 Google 圖表一樣，當使用者將滑鼠遊標懸停在資料上時，Gantt 圖表會顯示工具提示。

注意：「舊版圖表」將「不會」在舊版 Internet Explorer 中使用。 (G8 及更舊版本不支援 Gantt Charts 所需的 SVG)。

簡易範例

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

沒有任何依附元件

如要建立不含依附元件的 Gantt 圖表，請確認 DataTable 中每個資料列的最後一個值已設為 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 圖表接受與工作時間長度相關的三個值：開始日期、結束日期和持續時間 (毫秒)。例如，如果沒有開始日期，圖表就會根據結束日期和持續時間來計算遺漏的時間。計算結束日期也是如此。如果同時指定開始日期和結束日期，則可在兩者之間計算時間長度。

請參閱下表，瞭解 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>

重要路徑

Gantt 圖表中的關鍵路徑是指直接影響結束日期的路徑。Google Gantt 圖表的重要路徑預設為紅色，您可以使用 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 (選填) 啟動 結尾 時間長度 (毫秒) 完成百分比 依附元件
資料類型： string string string date date 數字 數字 string
角色： 網域 資料 資料 資料 資料 資料 資料 資料

 

設定選項

名稱 類型 預設 說明
background..fill string 「white」 以 HTML 色彩字串為圖表填入顏色。
Ggant.arrow 物件 空值 針對 Gantt Charts，gantt.arrow 會控制連結工作的不同箭頭屬性。
gant..arrow.angle 數字 45 箭頭角度。
gant..arrow.color string 「#000」 箭頭的顏色。
gant..arrow.length 數字 8 箭頭箭頭長度。
gant..arrow.radius 數字 15 用於定義兩項工作之間箭頭曲線的半徑。
gantt.arrow.spaceAfter 數字 4 箭頭頭部和所指工作之間的空白空間。
gant..arrow.width 數字 1.4 箭頭寬度。
gantt.barCornerRadius 數字 2 用來定義長條邊角的半徑。
gantt.barHeight 數字 空值 工作列的高度。
gantt.CriticalPathEnabled 布林值 true 如為 true，則重要路徑上的任何箭頭都會採用不同的樣式設定。
gantt.CriticalPathStyle 物件 空值 包含任何重要路徑箭頭樣式的物件。
gantt.CriticalPathStyle.stroke string 空值 任何關鍵路徑箭頭的顏色。
gantt.CriticalPathStyle.strokeWidth 數字 1.4 所有關鍵路徑箭頭的粗細。
gantt.defaultStartDate 日期/編號 空值 如果無法根據資料表中的值計算開始日期，系統會將這個開始日期設為這個值。可接受 date 值 (new Date(YYYY, M, D)) 或數字，也就是要使用的毫秒數。
gantt.innerGridHorizLine 物件 空值 定義內部水平格線的樣式。
gantt.innerGridHorizLine.stroke string 空值 內部水平格線線條的顏色。
gantt.innerGridHorizLine.ripWidth 數字 1 內部水平格線的寬度。
gantt.innerGridTrack.fill string 空值 內部格狀軌道的填滿顏色。如未指定 innerGridDarkTrack.fill，系統會將這項設定套用到每個格線軌跡。
gantt.innerGridDarkTrack.fill string 空值 替代深網狀軌道的填滿顏色。
gant..labelMaxWidth 數字 300 每個工作標籤的允許空間上限。
gant..labelStyle 物件 空值

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

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled 布林值 true 根據完成的工作百分比來填入工作列。
gantt.percentStyle.fill string 空值 工作列的完成部分百分比顏色。
gantt.shadowEnabled 布林值 true 如果設為 true，系統會在每個包含依附元件的工作列下方繪製陰影。
gantt.shadowColor string 「#000」 定義在具有依附元件的工作列下的陰影顏色。
gantt.shadowOffset 數字 1 定義任何具有依附元件的工作列下陰影的偏移量 (以像素為單位)。
gantt.sortTasks 布林值 true 指定任務應以遞增方式排序，如果為 true，否則請使用與 DataTable 對應資料列相同的順序。
gantt.trackHeight 數字 空值 軌道的高度。
width 數字 包含元素的寬度 圖表的寬度 (以像素為單位)。
height 數字 包含元素的高度 圖表的高度 (以像素為單位)。

方法

方法 說明
draw(data, options)

繪製圖表。只有在 ready 事件觸發後，圖表才會接受進一步呼叫方法。Extended description。

傳回類型：無
getSelection()

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

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

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

傳回類型：無
clearChart()

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

傳回類型：無

活動

事件 說明
click

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

屬性：targetID
error

嘗試轉譯圖表時發生錯誤。

屬性：ID、訊息
ready

圖表可供外部方法呼叫使用。如果您想要與圖表互動，並在繪製圖表後呼叫方法，請先為這個事件設定監聽器，然後再呼叫 draw 方法，並且只在事件觸發後呼叫這些方法。

屬性：無
select

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

屬性：無

資料政策

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