개요
간트 차트는 프로젝트의 구성요소 작업으로 프로젝트를 세분화하여 보여주는 차트 유형입니다. Google Gantt 차트에는 프로젝트 내 작업의 시작, 종료, 기간과 작업의 모든 종속 항목이 표시됩니다. Google Gantt 차트는 SVG를 사용하여 브라우저에서 렌더링됩니다. 모든 Google 차트와 마찬가지로 Gantt 차트는 사용자가 데이터 위로 마우스를 가져가면 도움말을 표시합니다.
참고: Gantt 차트는 이전 버전의 Internet Explorer에서 작동하지 않습니다. IE8 및 이전 버전에서는 Gantt 차트에서 요구하는 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>
종속 항목 없음
종속 항목이 없는 Gantt 차트를 만들려면 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>
컴퓨팅 시작/종료/기간
간트 차트는 작업 기간(시작일, 종료일, 기간(밀리초))과 관련된 세 가지 값을 허용합니다. 예를 들어 시작일이 없으면 차트에서 종료일과 기간을 기준으로 누락된 시간을 계산할 수 있습니다. 종료일 계산도 마찬가지입니다. 시작일과 종료일을 모두 제공하는 경우 둘 사이의 기간을 계산할 수 있습니다.
Gantt가 다양한 상황에서 시작, 종료, 기간의 존재를 처리하는 방법은 아래 표를 참고하세요.
| 시작 | End | 시간 | 성과 |
|---|---|---|---|
| 현재형 | 현재형 | 현재형 | 재생 시간이 시작/종료 시간과 일치하는지 확인합니다. 일치하지 않으면 오류가 발생합니다. |
| 현재형 | 현재형 | 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);
데이터 형식
행: 표의 각 행은 작업을 나타냅니다.
열:
| 열 0 | 열 1 | 열 2 | 열 3 | 열 4 | 열 5 | 열 6 | 열 7 | |
|---|---|---|---|---|---|---|---|---|
| 목적: | 태스크 ID | 작업 이름 | 리소스 ID (선택사항) | 시작 | End | 시간 (밀리초) | 완료율 | 종속 항목 |
| 데이터 유형: | 문자열 | 문자열 | 문자열 | date | date | 숫자 | 숫자 | 문자열 |
| 역할: | 나만의 | 데이터 | 데이터 | 데이터 | 데이터 | 데이터 | 데이터 | 데이터 |
구성 옵션
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 배경 색상.채우기 | 문자열 | '화이트' | 차트 채우기 색상이 HTML 색상 문자열로 표시됩니다. |
| Gantt.arrow | 객체 | null |
간트 차트의 경우 gantt.arrow는 작업을 연결하는 화살표의 다양한 속성을 제어합니다.
|
| gantt.arrow.angle | 숫자 | 45 | 화살표 머리의 각도입니다. |
| 간트.arrow.색상 | 문자열 | '#000' | 화살표의 색상입니다. |
| 간트.arrow.길이 | 숫자 | 8 | 화살표 헤드의 길이 |
| gantt.arrow.radius | 숫자 | 15 | 두 작업 간의 화살표 곡선을 정의하기 위한 반경입니다. |
| gantt.arrow.spaceAfter | 숫자 | 4 | 화살표 헤드와 화살표가 가리키는 할 일 사이의 공백입니다. |
| 간트.arrow.폭 | 숫자 | 1.4 | 화살표의 너비 |
| 간트.바코너라디오 | 숫자 | 2 | 막대의 모서리 곡선을 정의하는 반경입니다. |
| gantt.barHeight | 숫자 | null | 태스크 막대의 높이입니다. |
| gantt.심각한 경로 사용 | boolean | true |
true인 경우 중요 경로의 화살표 스타일이 다르게 지정됩니다.
|
| gantt.중요 경로스타일 | 객체 | null | 모든 주요 경로 화살표의 스타일이 포함된 객체입니다. |
| gantt.중요한 경로 스타일.획 | 문자열 | null | 주요 경로 화살표의 색상입니다. |
| gantt.중요한 경로 스타일.획 너비 | 숫자 | 1.4 | 주요 경로 화살표의 두께입니다. |
| Gantt.defaultStartDate | 날짜/숫자 | null |
DataTable의 값에서 시작일을 계산할 수 없는 경우 시작일이 다음과 같이 설정됩니다. date 값(new Date(YYYY, M, D)) 또는 숫자(사용할 밀리초 단위)를 허용합니다.
|
| gantt.innerGridHorizLine | 객체 | null | 내부 가로 그리드 선의 스타일을 정의합니다. |
| gantt.innerGridHorizLine.획 | 문자열 | null | 내부 가로 그리드 선의 색상입니다. |
| gantt.innerGridHorizLine.strWidth | 숫자 | 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로 설정하면 종속 항목이 있는 각 작업 표시줄 아래에 그림자를 그립니다.
|
| 간트.섀도우색상 | 문자열 | '#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 |
사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.