ガントチャート

概要

ガントチャートは、プロジェクトのコンポーネント タスクの内訳を示すグラフの一種です。Google ガントチャートは、プロジェクト内のタスクの開始、終了、所要時間と、タスクの依存関係を示します。Google のガントチャートは、SVG を使用してブラウザ上にレンダリングされます。他の Google グラフと同様に、ガントチャートではデータにカーソルを合わせるとツールチップが表示されます。

注: 古いバージョンの Internet Explorer ではガントチャートは動作しません。（IE8 以前のバージョンは、ガントチャートで必要な 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>

依存関係なし

依存関係のないガントチャートを作成するには、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>

開始/終了/期間の計算

ガントチャートには、タスクの期間に関する 3 つの値（開始日、終了日、期間（ミリ秒単位））を指定できます。たとえば、開始日がない場合、グラフは終了日と期間に基づいて欠損時間を計算できます。終了日の計算についても同様です。開始日と終了日の両方が指定されている場合、期間はその間で計算できます。

さまざまな状況で開始、終了、期間の存在がガントでどのように処理されるかについては、次の表をご覧ください。

開始 終了 所要時間 結果
プレゼンテーションを開始 プレゼンテーションを開始 プレゼンテーションを開始 期間が開始時間/終了時間と一致していることを確認します。整合性がない場合はエラーをスローします。
プレゼンテーションを開始 プレゼンテーションを開始 Null 開始時間と終了時間から期間を計算します。
プレゼンテーションを開始 Null プレゼンテーションを開始 終了時間を計算します。
プレゼンテーションを開始 Null Null 期間または終了時間を計算できないため、エラーをスローします。
Null プレゼンテーションを開始 プレゼンテーションを開始 開始時間を計算します。
Null Null プレゼンテーションを開始 依存関係に基づいて開始時間を計算します。defaultStartDate と組み合わせて、期間のみを使用してグラフを描画できるようにします。
Null プレゼンテーションを開始 Null 開始時間または期間を計算できないため、エラーをスローします。
Null Null Null 開始時間、終了時間、期間を計算できないため、エラーをスローします。

以上を念頭に置いて、各タスクの所要時間のみを使用して、通勤経路の典型的なレイアウトを示すグラフを作成できます。

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

クリティカル パス

ガントチャートのクリティカル パスは、終了日に直接影響する 1 つまたは複数のパスです。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);

データ形式

行: テーブルの各行はタスクを表します。

Columns:

  列 0 列 1 列 2 列 3 列 4 列 5 列 6 列 7
目的: タスク ID タスク名 リソース ID（省略可） 開始 終了 時間（ミリ秒単位） 進捗率 依存関係
データ型: string string string date date 数値 数値 string
ロール: ドメイン データ データ データ データ データ データ データ

 

構成オプション

名前 タイプ デフォルト 説明
backgroundColor.fill string '白' グラフの塗りつぶしの色。HTML の色文字列で指定します。
gantt.arrow オブジェクト null ガントチャートの場合、gantt.arrow はタスクを接続する矢印のさまざまなプロパティを制御します。
gantt.arrow.angle 数値 45 矢印の先端の角度。
gantt.arrow.color string 「#000」 矢印の色。
gantt.arrow.length 数値 8 矢印の先の長さ。
gantt.arrow.radius 数値 15 2 つのタスク間の矢印の曲線を定義する半径。
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 string null クリティカル パスの矢印の色。
gantt.criticalPathStyle.strokeWidth 数値 1.4 クリティカル パス矢印の太さ。
gantt.defaultStartDate 日付/数値 null DataTable の値から開始日を計算できない場合、開始日はこれに設定されます。date 値（new Date(YYYY, M, D)）または数値（使用するミリ秒数）を受け入れます。
gantt.innerGridHorizLine オブジェクト null 内側の水平グリッド線のスタイルを定義します。
gantt.innerGridHorizLine.stroke string null 内側の水平グリッド線の色。
gantt.innerGridHorizLine.strokeWidth 数値 1 内側の水平グリッド線の幅。
gantt.innerGridTrack.fill string null 内側のグリッド トラックの塗りつぶしの色。innerGridDarkTrack.fill が指定されていない場合、すべてのグリッド トラックに適用されます。
gantt.innerGridDarkTrack.fill string null 内側の暗いグリッド トラックの塗りつぶしの色。
gantt.labelMaxWidth 数値 300 各タスクラベルが許容する最大スペース容量。
gantt.labelStyle オブジェクト null

タスクラベルのスタイルを含むオブジェクト。

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true タスクの完了率に基づいてタスクバーに表示します。
gantt.percentStyle.fill string null タスクバーの完了率部分の色。
gantt.shadowEnabled boolean true true に設定すると、依存関係がある各タスクバーの下にシャドウが描画されます。
gantt.shadowColor string 「#000」 依存関係のあるタスクバーの下のシャドウの色を定義します。
gantt.shadowOffset 数値 1 依存関係のあるタスクバーの下のシャドウのオフセットをピクセル単位で定義します。
gantt.sortTasks boolean true true の場合、タスクをトポロジで並べ替えることを指定します。それ以外の場合は、DataTable の対応する行と同じ順序を使用します。
gantt.trackHeight 数値 null 線路の高さ。
幅 数値 含まれる要素の幅 グラフの幅（ピクセル単位）。
身長 数値 含まれる要素の高さ グラフの高さ（ピクセル単位）。

メソッド

メソッド 説明
draw(data, options)

グラフを描画します。グラフは、ready イベントが発生した後にのみ、それ以上のメソッド呼び出しを受け入れます。Extended description。

戻り値の型: none
getSelection()

選択したグラフ エンティティの配列を返します。 選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。 Extended description 。

戻り値の型: 選択要素の配列
setSelection()

指定したグラフ エンティティを選択します。前の選択をキャンセルします。 選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description 。

戻り値の型: none
clearChart()

チャートを消去し、割り当て済みリソースをすべて解放します。

戻り値の型: none

イベント

イベント 説明
click

ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。

プロパティ: targetID
error

グラフのレンダリング中にエラーが発生したときに呼び出されます。

プロパティ: id、message
ready

グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。

Properties（プロパティ）: なし
select

ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、getSelection() を呼び出します。

Properties（プロパティ）: なし

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。