간트 차트

개요

간트 차트는 프로젝트를 구성요소 작업으로 분류하여 보여주는 차트 유형입니다. 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)

차트를 그립니다. 차트에서는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description.

반환 유형: 없음
getSelection()

선택된 차트 항목의 배열을 반환합니다. 선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음

이벤트

이벤트 설명
click

사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 언제 클릭했는지 식별하는 데 사용할 수 있습니다.

속성: targetID
error

차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
ready

차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
select

사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.