ガントチャート

概要

ガントチャートは、プロジェクトのコンポーネント タスクへの内訳を示すグラフの一種です。Google ガントチャートは、プロジェクト内のタスクの開始、終了、実行時間のほか、タスクの依存関係を示します。Google Gantt のグラフは、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 つの値(開始日、終了日、期間(ミリ秒))を受け入れます。たとえば、開始日がない場合、グラフは終了日と期間に基づいて欠損時間を計算できます。終了日の計算についても同様です。開始日と終了日の両方を指定すると、2 つの期間を計算できます。

Gantt がさまざまな状況で開始、終了、所要時間の存在を処理する方法については、次の表をご覧ください。

開始 終了 所要時間 結果
共有 共有 共有 継続時間が開始時間/終了時間と一致していることを確認します。一貫性がない場合はエラーをスローします。
共有 共有 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>

クリティカル パス

ガントチャートのクリティカル パスとは、終了日に直接影響するパスのことです。Google Gantt グラフのクリティカル パスはデフォルトで赤色になっており、criticalPathStyle オプションを使用してカスタマイズできます。criticalPathEnabledfalse に設定して、クリティカル パスをオフにすることもできます。

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

トラックのスタイル設定

グリッドのスタイル設定は、innerGridHorizLineinnerGridTrackinnerGridDarkTrack の組み合わせによって処理されます。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(省略可) 開始 終了 継続時間(ミリ秒) 進捗率 依存関係
データの種類: 文字列 文字列 文字列 date date 数値 数値 文字列
ロール: domain サポート サポート サポート サポート サポート サポート サポート

 

設定オプション

名前 タイプ Default 説明
backgroundColor.fill 文字列 「白」 グラフは HTML の色文字列として色が塗りつぶされます。
ガントロー オブジェクト null ガントチャートでは、gantt.arrow はタスクを接続している矢印のさまざまなプロパティを制御します。
ガントチャート.arrow.angle 数値 45 矢印の頭の角度。
gantt.arrow.color 文字列 「#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 文字列 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 トラックの高さ。
width 数値 含まれる要素の幅 グラフの幅(ピクセル単位)。
高さ 数値 コンテナ要素の高さ グラフの高さ(ピクセル単位)です。

メソッド

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

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

戻り値の型: なし
getSelection()

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

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

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

戻り値の型: なし
clearChart()

グラフをクリアし、割り当てられているすべてのリソースを解放します。

戻り値の型: なし

イベント

イベント 説明
click

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

プロパティ: targetID
error

グラフのレンダリング中にエラーが発生しました。

プロパティ: ID、メッセージ
ready

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

プロパティ: なし
select

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

プロパティ: なし

データポリシー

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