타임라인

  1. 개요
  2. 간단한 예
  3. 막대 라벨 지정
  4. 고급 예시
  5. 한 행에 막대 배치
  6. 글꼴 변경
  7. 색상 제어
  8. 겹치는 격자선
  9. 맞춤설정 도움말
  10. 로드 중
  11. 데이터 형식
  12. 구성 옵션
  13. 메서드
  14. 이벤트
  15. 데이터 정책

개요

타임라인은 시간 경과에 따라 리소스 집합이 사용되는 방식을 보여주는 차트입니다. 소프트웨어 프로젝트를 관리하고 있고 누가 언제 무엇을 하는지 설명하려는 경우 또는 회의를 조직하고 회의실을 예약해야 하는 경우 타임라인을 시각화하는 것이 합리적일 때가 많습니다. 널리 사용되는 타임라인 유형 중 하나는 간트 차트입니다.

참고: JavaScript 날짜 객체에서 월의 색인은 0에서 시작하여 11까지 올라갑니다. 여기서 1은 0개월, 12월은 11개월입니다. 타임라인이 한 달 정도 차이가 나는 것 같다면 그 이유일 가능성이 큽니다. 자세한 내용은 날짜 및 시간 페이지를 참조하세요.

간단한 예

미국 대통령의 임기 임박일을 계획한다고 가정해 보겠습니다. 여기서 '리소스'는 대통령이며, 각 대통령의 임기를 막대로 표시할 수 있습니다.

막대 위로 마우스를 가져가면 자세한 정보가 포함된 도움말이 표시됩니다.

timeline 패키지를 로드하고 페이지가 렌더링될 때 차트를 그리는 콜백을 정의하면 drawChart() 메서드가 google.visualization.Timeline()를 인스턴스화하고 각 대통령을 위한 행 1개로 dataTable를 채웁니다.

dataTable 내에서 첫 번째 열은 대통령의 이름이고 두 번째와 세 번째 열은 시작 및 종료 시간입니다. 이는 JavaScript Date 유형을 가지지만 일반 숫자일 수도 있습니다.

마지막으로 차트의 draw() 메서드를 호출합니다. 이 메서드는 drawChart()의 첫 번째 줄에 container이 선언되었을 때 사용된 것과 동일한 식별자(timeline)와 함께 div 내에 이 메서드를 표시합니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

Google 차트 타임라인은 맞춤설정할 수 있으며 다음 예에서는 타임라인의 모양을 맞춤설정하는 일반적인 방법을 보여줍니다.

막대 라벨 지정

행 라벨(위의 'Washington', 'Adams', 'Jefferson') 외에도 개별 막대에 라벨을 지정할 수 있습니다. 여기서는 행 라벨을 간단한 숫자로 바꾸고 각 대통령의 이름을 막대에 배치합니다.

이 코드에서는 막대 라벨(각 대통령의 전체 이름)을 포함하기 위해 데이터에 새 열을 삽입했습니다. 타임라인 dataTable에 열이 4개 있는 경우 첫 번째 열은 행 라벨로, 두 번째 열이 막대 라벨로, 세 번째와 네 번째 열이 시작 및 끝으로 해석됩니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

위의 새로운 행 라벨은 그다지 유익하지 않으므로 타임라인 showRowLabels 옵션을 사용하여 이러한 행을 삭제하겠습니다.

기본적으로 showRowLabels는 true입니다. false로 설정하면 행 라벨이 삭제됩니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

고급 예

타임라인을 더 복잡하게 만들기 위해 부통령과 국무장관을 차트에 추가해 보겠습니다. John Adams는 대통령이 되기 전 부통령이었고, Thomas Jefferson은 국무장관, 그리고 부통령, 그리고 최종적으로 대통령이었습니다.

타임라인에서 리소스는 여러 행에 표시되더라도 동일한 색상을 사용하므로 다음 차트에서 각 사람은 일관된 색상으로 표시됩니다.

일부 국무장관이 단기간에 복무했으므로 이 차트는 라벨 지정을 테스트하기에 좋습니다. 라벨이 막대에 비해 너무 크면 막대 크기에 따라 축약되거나 제거됩니다. 사용자는 언제든지 막대 위로 마우스를 가져가 도움말 정보를 확인할 수 있습니다.

아래 코드에 표시된 순서대로 타임라인에는 행이 순서대로 표시됩니다(예: 부사장, 국무장관 고위장). 그러나 막대의 레이아웃은 시작 및 종료 시간에 의해서만 결정되므로 dataTable에서 두 명의 국무장관 또는 두 명의 대통령을 바꿔도 차트에 영향을 미치지 않습니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

한 행에 막대 배치

교황과 달리 미국의 대통령은 한 번에 한 명만 있을 수 있으므로 모든 행에 '대통령' 라벨을 지정하면 타임라인에서 첫 번째 차트의 세 행을 하나의 행으로 결합하여 더 깔끔하게 표시합니다. groupByRowLabel 옵션을 사용하여 이 동작을 제어할 수 있습니다.

기본 동작은 다음과 같습니다.

이제 groupByRowLabel를 false로 설정하고 한 행을 3개로 분할해 보겠습니다.

그룹화를 사용 중지하는 코드는 다음과 같습니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

색상 제어

기본적으로 Google 차트는 미학과 가독성 (시각 장애가 있는 사용자 포함)에 최적화된 색상을 선택합니다. colorByRowLabel, singleColor, backgroundColor, colors 옵션을 사용하여 기본 동작을 맞춤설정할 수 있습니다.

colorByRowLabel 옵션은 같은 행에 있는 모든 막대의 색상을 동일하게 지정합니다. 이 방법은 막대 사이에 간격이 있을 때 적합합니다.

colorByRowLabel의 기본값은 false이므로 여기서는 재정의하고 true로 설정합니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

표시된 행과 관계없이 모든 막대를 동일한 색상으로 표시하려면 singleColor 옵션을 사용하세요.

아래 코드에서 singleColor는 16진수 값으로 설정되어 모든 막대의 색상을 연한 녹색으로 지정합니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

backgroundColor 옵션으로 행의 배경 색상을 제어할 수 있습니다.

backgroundColor는 16진수 값으로 지정됩니다. 여기에서는 colorByRowLabel와 페어링하여 콘퍼런스에서 트랙을 표시합니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

그런 다음 배경 색상을 행 색인으로 교차 또는 비교환으로 설정하려면 alternatingRowStyle 옵션을 사용합니다 (활성 v51 이상).

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

개별 막대의 색상을 제어하려면 colors 옵션을 사용하세요.

colors는 16진수 값의 배열을 사용하며, 이는 막대에 순서대로 적용됩니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

차트에 나열된 색상보다 더 많은 색상이 필요한 경우 차트는 singleColor가 목록의 첫 번째 색상으로 설정된 것처럼 작동합니다. 이는 타임라인뿐 아니라 모든 Google 차트에 적용됩니다.

개별 막대의 색상을 제어하는 또 다른 방법은 스타일 역할이 있는 열을 사용하는 것입니다.

스타일 열을 추가하고 채우는 코드:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

글꼴 변경

rowLabelStyle로 각 행의 라벨의 서체와 글꼴을 선택하고 barLabelStyle로 각 막대의 라벨의 서체와 글꼴을 선택할 수 있습니다. 아래에 나와 있습니다.

참고: 사용자의 브라우저에서 렌더링할 수 있는 서체를 선택해야 합니다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

barLabel 텍스트의 색상은 설정할 수 없습니다.

겹치는 격자선

Google 차트는 타임라인 격자선이 흐려지지 않도록 막대 끝점을 약간 조정합니다. 이러한 동작을 방지하려면 avoidOverlappingGridLines 옵션을 false로 설정하세요.

효과를 보여주기 위해 다음 두 가지 예를 살펴보겠습니다. 첫 번째 예시에는 격자선이 겹쳐 있고 두 번째에는 격자선이 겹쳐 있지 않습니다.

다음은 격자선과 겹치는 코드입니다.

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

맞춤설정 도움말

5개 열로 구성된 데이터 테이블에 도움말 열을 추가하여 사용자가 타임라인 막대 위로 마우스를 가져갈 때 표시되는 내용을 맞춤설정할 수 있습니다. 기본값이 아닌 도움말을 제공하려면 데이터 테이블의 모든 행에 5개의 열 (행 라벨, 막대 라벨, 도움말, 시작, 끝)이 모두 있어야 합니다.

막대 위로 마우스를 가져가면 세 번째 열에 정의된 텍스트가 포함된 도움말이 표시됩니다. 이 차트에서는 세 번째 열에 도움말이 존재할 수 있도록 두 번째 열을 더미 값 (여기에서는 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':['timeline']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

로드

google.charts.load 패키지 이름은 timeline입니다. 

  google.charts.load("current", {packages: ["timeline"]});

시각화의 클래스 이름은 google.visualization.Timeline입니다. 

  var visualization = new google.visualization.Timeline(container);

데이터 형식

행: 표의 각 행은 타임라인 막대를 나타냅니다.

열:

  열 0 열 1 열 2 열 3 열 4
목적: 행 라벨 막대 라벨 (선택사항) 도움말 (선택사항) 시작 종료
데이터 유형: 문자열 문자열 문자열 숫자 또는 날짜 숫자 또는 날짜
역할: 데이터 데이터 도움말 데이터 데이터

 

구성 옵션

이름
alternatingRowStyle

차트의 배경색을 행 색인으로 번갈아 사용해야 하는지 여부입니다 (즉, 색인이 균등한 행의 배경색을 더 어두운 색조로 설정). false인 경우 차트 배경은 하나의 균일한 색상으로 설정됩니다. true인 경우 차트 배경에 행 색인별로 색조가 번갈아 표시됩니다. (참고: 활성 v51 이상)

유형: 불리언
기본값: true
avoidOverlappingGridLines

디스플레이 요소 (예: 타임라인의 막대)가 그리드 선을 가릴지 여부입니다. false이면 그리드 선이 디스플레이 요소로 완전히 가려질 수 있습니다. true인 경우 그리드 선이 계속 표시되도록 디스플레이 요소가 변경될 수 있습니다.

유형: 불리언
기본값: true
backgroundColor

차트의 기본 영역의 배경 색상입니다. 간단한 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이거나 다음과 같은 속성을 갖는 객체일 수 있습니다.

유형: 문자열 또는 객체
기본값: 'white'
색상

차트 요소에 사용할 색상입니다. 문자열 배열로, 여기서 각 요소는 HTML 색상 문자열입니다(예: colors:['red','#004411']).

유형: 문자열 배열
기본값: 기본 색상
enableInteractivity

차트에서 사용자 기반 이벤트가 발생하는지 또는 사용자 상호작용에 반응하는지 여부입니다. false인 경우 차트에서 'select' 또는 기타 상호작용 기반 이벤트가 발생하지 않고 (준비됨 또는 오류 이벤트는 발생함) 사용자 입력에 따라 마우스 오버 텍스트를 표시하거나 달리 변경되지 않습니다.

유형: 불리언
기본값: true
fontName

차트에 있는 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 이를 재정의할 수 있습니다.

유형: 문자열
기본값: 'Arial'
fontSize

차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 이를 재정의할 수 있습니다.

유형: 숫자
기본값: 자동
forceIFrame

인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다.

유형: 불리언
기본값: false
키

차트의 높이입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 높이
timeline.barLabelStyle

막대 라벨 텍스트 스타일을 지정하는 객체입니다. 형식은 다음과 같습니다.

{fontName: <string>, fontSize: <string>}

이 표의 fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: null
timeline.colorByRowLabel

true로 설정하면 행의 모든 막대의 색상이 동일하게 지정됩니다. 기본값은 막대 라벨당 한 가지 색상을 사용하는 것입니다.

유형: 불리언
기본값: false
timeline.groupByRowLabel

false로 설정하면 dataTable 항목마다 행이 하나씩 생성됩니다. 기본값은 행 라벨이 동일한 막대를 하나의 행으로 수집하는 것입니다.

유형: 불리언
기본값: true
timeline.rowLabelStyle

행 라벨 텍스트 스타일을 지정하는 객체입니다. 형식은 다음과 같습니다.

{color: <string>, fontName: <string>, fontSize: <string>}

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. 또한 이 표의 fontName 및 fontSize을 참고하세요.

유형: 객체
기본값: null
timeline.showBarLabels

false로 설정하면 막대 라벨이 생략됩니다. 기본값은 해당 광고를 표시하는 것입니다.

유형: 불리언
기본값: true
timeline.showRowLabels

false로 설정하면 행 라벨이 생략됩니다. 기본값은 해당 광고를 표시하는 것입니다.

유형: 불리언
기본값: true
timeline.singleColor

막대의 색상이 모두 동일합니다. 16진수 값 (예: '#8d8').

유형: 문자열
기본값: null
tooltip.isHtml

HTML 렌더링이 아닌 SVG 렌더링된 도움말을 사용하려면 false로 설정합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정 을 참고하세요.

참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠의 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다.

유형: 불리언
기본값: true
tooltip.trigger

도움말이 표시되도록 하는 사용자 상호작용입니다.

  • 'focus' - 사용자가 요소 위로 마우스를 가져가면 도움말이 표시됩니다.
  • 'none' - 도움말이 표시되지 않습니다.
유형: 문자열
기본값: 'focus'
너비

차트의 너비입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 너비

메서드

메서드
draw(data, options)

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

반환 유형: 없음
clearChart()

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

반환 유형: 없음
getSelection()

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

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

이벤트

이름
error

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

속성: ID, 메시지
onmouseover

사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀, 범례 항목은 열 (행 색인은 null), 카테고리는 행 (열 색인은 null)과 연관이 있습니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀, 범례 항목은 열 (행 색인은 null), 카테고리는 행 (열 색인은 null)과 연관이 있습니다.

속성: 행, 열
ready

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

속성: 없음
select

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

속성: 없음

데이터 정책

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