概要
ガントチャートは、プロジェクトのコンポーネント タスクの内訳を示すグラフの一種です。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) |
グラフを描画します。グラフは、 戻り値の型: none
|
getSelection() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。
戻り値の型: 選択要素の配列
|
setSelection() |
指定したグラフ エンティティを選択します。前の選択をキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
| イベント | 説明 |
|---|---|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。