概要
ガントチャートは、プロジェクトのコンポーネント タスクへの内訳を示すグラフの一種です。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
オプションを使用してカスタマイズできます。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(省略可) | 開始 | 終了 | 継続時間(ミリ秒) | 進捗率 | 依存関係 |
データの種類: | 文字列 | 文字列 | 文字列 | 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) |
グラフを描画します。グラフでは、 戻り値の型: なし
|
getSelection() |
選択したグラフ エンティティの配列を返します。選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
setSelection() |
指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: なし
|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
イベント
イベント | 説明 |
---|---|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、 プロパティ: なし
|
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、 プロパティ: なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。