개요
간트 차트는 프로젝트를 구성요소 작업으로 분류하여 보여주는 차트 유형입니다. 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>
리소스 그룹화
본질적으로 유사한 작업은 리소스를 사용하여 그룹화할 수 있습니다. 데이터의 Task ID 및 Task Name 열 뒤에 string 유형의 열을 추가하고 리소스로 그룹화해야 하는 모든 작업의 리소스 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>
시작/종료/기간 계산
간트 차트는 작업 기간과 관련된 세 가지 값, 즉 시작일, 종료일, 기간 (밀리초)을 허용합니다. 예를 들어 시작일이 없는 경우 차트에서 종료일과 기간을 기준으로 누락된 시간을 계산할 수 있습니다. 종료일을 계산할 때도 마찬가지입니다. 시작일과 종료일이 모두 주어지면 두 날짜 사이의 기간을 계산할 수 있습니다.
아래 표에서 간트가 다양한 상황에서 시작, 종료, 지속 시간의 존재를 처리하는 방법을 확인하세요.
| 시작 | 종료 | 소요 시간 | 결과 |
|---|---|---|---|
| 발표 | 발표 | 발표 | 재생 시간이 시작/종료 시간과 일치하는지 확인합니다. 일치하지 않으면 오류가 발생합니다. |
| 발표 | 발표 | 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 간트 차트의 중요 경로는 기본적으로 빨간색으로 표시되며 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 (선택사항) | 시작 | 종료 | 시간 (밀리초) | 완료율 | 종속 항목 |
| 데이터 유형: | 문자열 | 문자열 | 문자열 | date | date | 숫자 | 숫자 | 문자열 |
| 역할: | 도메인 | 데이터 | 데이터 | 데이터 | 데이터 | 데이터 | 데이터 | 데이터 |
구성 옵션
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| backgroundColor.fill | 문자열 | '흰색' | HTML 색상 문자열로 된 차트 채우기 색상입니다. |
| gantt.arrow | 객체 | null |
간트 차트의 경우 gantt.arrow는 작업을 연결하는 화살표의 다양한 속성을 제어합니다.
|
| gantt.arrow.angle | 숫자 | 45 | 화살표 머리의 각도입니다. |
| gantt.arrow.color | 문자열 | '#000' | 화살표의 색상입니다. |
| gantt.arrow.length | 숫자 | 8 | 화살표 머리의 길이입니다. |
| gantt.arrow.radius | 숫자 | 15 | 두 작업 사이의 화살표 곡선을 정의하기 위한 반경입니다. |
| 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 | 트랙의 높이입니다. |
| 너비 | 숫자 | 포함 요소의 너비 | 차트의 너비입니다(단위: 픽셀). |
| 키 | 숫자 | 포함 요소의 높이 | 픽셀 단위로 표시할 수 있습니다. |
메서드
| 메서드 | 설명 |
|---|---|
draw(data, options) |
차트를 그립니다. 차트에서는 반환 유형: 없음
|
getSelection() |
선택된 차트 항목의 배열을 반환합니다.
선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
clearChart() |
차트를 지우고 할당된 리소스를 모두 해제합니다. 반환 유형: 없음
|
이벤트
| 이벤트 | 설명 |
|---|---|
click |
사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 언제 클릭했는지 식별하는 데 사용할 수 있습니다. 속성: targetID
|
error |
차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
ready |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.