타임라인

개요

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

참고: 자바스크립트 날짜 객체에서 월은 0부터 색인 생성이 11을 거쳐 11월이 0월이고 12월이 11월이 됩니다. 타임라인이 한 달씩 벗어나는 경우 그 이유일 가능성이 높습니다. 자세한 내용은 날짜 및 시간 페이지를 참조하세요.

간단한 예

미국 대통령이 자신의 임기를 마친 시점을 표시한다고 가정해 보겠습니다. 여기서 '리소스'는 대통령이며 각 대통령 임기를 막대로 표시할 수 있습니다.

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

timeline 메서드를 로드하고 페이지 렌더링 시 차트를 그리는 콜백을 정의한 후 drawChart() 메서드는 google.visualization.Timeline()를 인스턴스화한 다음 각 프레젠터에 대해 하나의 행으로 dataTable를 채웁니다.

dataTable 내부에서 첫 번째 열은 대통령의 이름이고, 두 번째 및 세 번째 열은 시작 및 종료 시간입니다. 이 유형은 자바스크립트 Date 유형이지만 일반 수일 수도 있습니다.

마지막으로 차트의 draw() 메서드를 호출하여 containerdrawChart()의 첫 번째 줄에 선언될 때 사용된 것과 동일한 식별자(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 차트 타임라인은 맞춤설정이 가능하며, 다음 예에서는 타임라인의 모양을 맞춤설정하는 몇 가지 일반적인 방법을 보여줍니다.

막대 라벨 지정하기

행 라벨(위의 '워싱턴', '아담', '제퍼슨') 외에도 개별 막대에 라벨을 지정할 수 있습니다. 여기서는 행 라벨을 간단한 숫자로 변경하고 각 대통령의 이름을 바에 배치합니다.

이 코드에서는 막대 라벨을 보관할 새 열(각 대통령의 전체 이름)을 데이터에 삽입했습니다. 타임라인 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 옵션을 사용하여 라벨을 삭제하겠습니다.

기본적으로 showRowLabelstrue입니다. 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>

고급 예

타임라인을 더 복잡하게 만들기 위해 차트에 부통령과 국가 장관을 추가하겠습니다. 존 애덤스는 대통령이 되기 전에 부통령을 맡았으며 토마스 제퍼슨은 미국 국무장관, 부통령, 마침내 대통령을 지냈습니다.

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

일부 상태 비서가 매우 짧은 시간 동안 서빙되었으므로 이 차트는 라벨 지정에 적합합니다. 라벨이 막대에 비해 너무 크면 막대 크기에 따라 축약하거나 삭제됩니다. 사용자는 언제든지 막대에 마우스를 가져가면 도움말 정보를 볼 수 있습니다.

타임라인에는 행이 다음 코드 내에 표시되므로, 즉 총무관이 부국장 대신 위에 순서대로 표시됩니다. 그러나 막대의 레이아웃은 시작 시간과 종료 시간에 따라서만 결정되므로 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 옵션을 사용하여 이 동작을 제어할 수 있습니다.

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

이제 groupByRowLabelfalse로 설정하고 한 행을 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
목적: 행 라벨 막대 라벨 (선택사항) 도움말 (선택사항) 시작 End
데이터 유형: 문자열 문자열 문자열 숫자 또는 날짜 숫자 또는 날짜
역할: 데이터 데이터 도움말 데이터 데이터

 

구성 옵션

이름
AltratingRowStyle

차트가 행 색인별로 배경 색상을 바꿔야 하는지 여부입니다. 즉, 색인이 생성된 행의 배경색을 짙은 색조로 바꿉니다. false인 경우 차트 배경이 균일한 색상이 됩니다. true인 경우 차트 배경이 행 색인별로 색조를 바꿉니다. (참고: 활성 v51+)

유형: 부울
기본값: true
겹쳐지지 않는 그리드 선 피하기

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

유형: 부울
기본값: true
backgroundColor

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

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

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

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

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

유형: 부울
기본값: true
글꼴 이름

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

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

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

유형: 숫자
기본값: 자동
강제 IFrame

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

유형: 부울
기본값: false
높이

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

유형: 숫자
기본값: 값을 포함하는 요소의 높이
타임라인.barLabelStyle

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

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

이 표의 fontNamefontSize도 참고하세요.

유형: 객체
기본값: null
타임라인.colorByRowLabel

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

유형: 부울
기본값: false
타임라인.groupByRowLabel

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

유형: 부울
기본값: true
타임라인.rowLabelStyle

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

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

color은 모든 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. 이 표의 fontNamefontSize도 참고하세요.

유형: 객체
기본값: null
타임라인.showBarLabel

false로 설정하면 막대 라벨이 생략됩니다. 기본값은 표시입니다.

유형: 부울
기본값: true
타임라인.showRowLabel

false로 설정되면 행 라벨이 생략됩니다. 기본값은 표시입니다.

유형: 부울
기본값: true
타임라인.단일 색상

모든 막대의 색상이 동일합니다. 16진수 값으로 지정됩니다 (예: '#8d8').

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

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

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

유형: 부울
기본값: true
tooltip.trigger

도움말을 표시하는 사용자 상호작용:

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

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

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

방법

메서드
draw(data, options)

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

반환 유형: 없음
clearChart()

차트를 삭제하고 할당된 모든 리소스를 해제합니다.

반환 유형: 없음
getSelection()

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

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

이벤트

이름
error

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

속성: ID, 메시지
onmouseover

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

속성: 행, 열
onmouseout

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

속성: 행, 열
ready

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

속성: 없음
select

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

속성: 없음

데이터 정책

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