날짜 및 시간

  1. 개요
  2. 날짜 생성자를 사용하는 날짜 및 시간
  3. 날짜, 시간, 시간대
  4. 날짜 문자열 표현을 사용하는 날짜 및 시간
  5. Timeofday 사용하기
  6. 축, 격자선, 눈금 라벨 형식 지정
  7. JavaScript 날짜에 대한 추가 정보

개요

date 및 datetime DataTable 열 데이터 유형은 기본 제공되는 JavaScript Date 클래스를 활용합니다.

중요: 자바스크립트 날짜 객체에서 월의 색인은 0부터 시작하여 11까지 올라갑니다. 1월은 0월, 12월은 11일입니다.

날짜 생성자를 사용하는 날짜 및 시간

날짜 생성자를 사용하는 날짜

새 날짜 객체를 만들려면 날짜의 구성요소를 지정하는 인수로 new 키워드와 Date() 생성자를 호출합니다. 이러한 인수는 날짜의 다양한 속성에 상응하는 여러 숫자의 형태를 취합니다. 

new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)

date 데이터 유형과 함께 날짜 생성자를 사용할 때 연도, 월, 일만 지정하면 됩니다.

날짜 생성자는 new Date(Milliseconds) 형식을 취할 수도 있습니다. 여기서 밀리초는 1970년 1월 1일 00:00:00 UTC에서 원하는 날짜의 거리(밀리초 단위)입니다. 이 날짜 이전의 날짜와 시간의 경우 음수의 밀리초가 제공됩니다.

날짜 생성자는 addColumn(), addRow(), addRows() 메서드와 arrayToDataTable() 메서드를 사용하여 DataTable을 수동으로 구성할 때 유용합니다. 하지만 JSON을 사용하여 데이터를 지정하는 경우 문자열 표현을 사용해야 합니다.

JavaScript 날짜 생성자는 날짜의 문자열 표현을 인수로 사용할 수도 있습니다. 이 문자열은 여러 형식을 취할 수 있습니다. 가장 신뢰할 수 있는 양식은 RFC 2822 사양 또는 ISO 8601 사양을 준수합니다. 이에 대한 형식은 다음과 같습니다.

  • RFC 2822 — 'MMM DD, YYYY' 또는 'DD MMM, YYYY'(예: new Date('Jan 1, 2015') 또는 new Date('1 Jan, 2015'))
  • ISO 8601 — 'YYYY-MM-DD'(예: new Date('2015-01-01'))

경고: Date 생성자의 문자열 표현은 브라우저와 브라우저 버전에 따라 다르게 파싱될 수 있으므로 동일한 문자열에 관해서도 다른 날짜가 반환될 수 있습니다. 따라서 Date 생성자에 문자열을 전달하는 것은 권장하지 않습니다. 대신 날짜 생성자의 인수에는 숫자만 사용하는 것이 좋습니다.

아래의 타임라인은 2000년 이후 각 NFL 시즌의 슈퍼볼 챔피언을 보여줍니다.


다음은 이 타임라인을 만드는 코드입니다. new Date() 생성자의 사용과 각 날짜에 지정된 숫자는 앞서 언급했듯이 0을 기준으로 한 월을 사용합니다. 

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

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Team');
      data.addColumn('date', 'Season Start Date');
      data.addColumn('date', 'Season End Date');

      data.addRows([
        ['Baltimore Ravens',     new Date(2000, 8, 5), new Date(2001, 1, 5)],
        ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
        ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
        ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
        ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2005, 8, 5), new Date(2006, 1, 5)],
        ['Indianapolis Colts',   new Date(2006, 8, 5), new Date(2007, 1, 5)],
        ['New York Giants',      new Date(2007, 8, 5), new Date(2008, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2008, 8, 5), new Date(2009, 1, 5)],
        ['New Orleans Saints',   new Date(2009, 8, 5), new Date(2010, 1, 5)],
        ['Green Bay Packers',    new Date(2010, 8, 5), new Date(2011, 1, 5)],
        ['New York Giants',      new Date(2011, 8, 5), new Date(2012, 1, 5)],
        ['Baltimore Ravens',     new Date(2012, 8, 5), new Date(2013, 1, 5)],
        ['Seattle Seahawks',     new Date(2013, 8, 5), new Date(2014, 1, 5)],
      ]);

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

날짜 생성자를 사용하는 날짜/시간

DataTable datetime 열 데이터 유형은 date 데이터 유형과 동일한 날짜 생성자를 사용하지만 이제 모든 인수를 사용하여 시간을 채웁니다.

또는 datetime의 문자열 표현을 날짜 생성자에 전달할 수도 있습니다. datetime의 문자열 표현은 4자리 시간대 오프셋 외에도 시간, 분, 초를 추가하는 것으로 구성됩니다 (예: 태평양 표준시 (PST)는 -0800). RFC 2822 사양의 경우 시간과 시간대가 날짜와 시간, 시간과 시간대 사이의 공백과 함께 추가됩니다. ISO 8601 사양에서는 공백이 없으며, 대신 날짜 뒤에 대문자 'T'가 붙어서 시간 구성요소를 나타냅니다. 또한 시간과 시간대 오프셋 사이에도 공백이 없습니다. 2014년 12월 6일 오전 10시 30분(PST)의 전체 datetime 날짜 문자열은 다음과 같습니다.

  • RFC 2822: Dec 6, 2014 10:30:00 -0800
  • ISO 8601 — 2014-12-06T10:30:00-0800

경고: 다시 말하지만 문자열 표현은 브라우저/버전에 따라 다르게 파싱될 수 있습니다. 특히 시간과 시간대를 처리할 때 날짜/시간을 UTC (GMT) 시간대로 반환하는지 아니면 현지 시간으로 오프셋하여 반환하는지에 차이가 있습니다. 이것이 날짜/시간 문자열을 사용하는 것이 권장되지 않는 또 다른 이유입니다.

아래 타임라인은 날짜/시간 데이터 유형을 사용하여 평균 하루를 분석합니다. 

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Activity', 'Start Time', 'End Time'],
        ['Sleep',
         new Date(2014, 10, 15, 0, 30),
         new Date(2014, 10, 15, 6, 30)],
        ['Eat Breakfast',
         new Date(2014, 10, 15, 6, 45),
         new Date(2014, 10, 15, 7)],
        ['Get Ready',
         new Date(2014, 10, 15, 7, 4),
         new Date(2014, 10, 15, 7, 30)],
        ['Commute To Work',
         new Date(2014, 10, 15, 7, 30),
         new Date(2014, 10, 15, 8, 30)],
        ['Work',
         new Date(2014, 10, 15, 8, 30),
         new Date(2014, 10, 15, 17)],
        ['Commute Home',
         new Date(2014, 10,  15, 17),
         new Date(2014, 10,  15, 18)],
        ['Gym',
         new Date(2014, 10, 15, 18),
         new Date(2014, 10,  15, 18, 45)],
        ['Eat Dinner',
         new Date(2014, 10,  15, 19),
         new Date(2014, 10,  15, 20)],
        ['Get Ready For Bed',
         new Date(2014, 10,  15, 21),
         new Date(2014, 10,  15, 22)]
      ]);

      var options = {
        height: 450,
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

날짜, 시간, 시간대

date 또는 datetime에 대해 날짜 생성자를 사용하면 사용자의 브라우저에 설정된 시간대로 원하는 날짜 또는 날짜/시간을 반환합니다. 날짜 객체를 특정 시간대로 설정하는 방법에는 여러 가지가 있습니다. 먼저 Google 차트는 timeZone를 지정할 수 있는 날짜 형식 지정 도구를 제공합니다. 이렇게 하면 DataTable의 date 및 datetime 값 각각에 형식이 지정된 값이 제공됩니다. 문자열을 new Date() 생성자에 인수로 전달하거나 다음과 같이 Date.UTC() 메서드에서 인수를 래핑할 수 있습니다. 

new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))

이렇게 하면 Date 객체가 UTC (GMT) 시간대를 기준으로 지정된 날짜 및 시간으로 설정됩니다. 여기에서 원하는 시간대 오프셋을 계산하고 원하는 대로 날짜와 시간을 설정할 수 있습니다.

날짜 문자열 표현을 사용하는 날짜 및 시간

JavaScript DataTable 객체 리터럴 표기법을 사용하여 DataTable을 빌드하는 데이터를 직렬화할 때는 new Date() 생성자를 사용할 수 없습니다. 대신 Google 차트는 DataTable을 만들 때 date 또는 datetime를 올바르게 직렬화하고 파싱할 수 있는 날짜 문자열 표현을 제공합니다. 이 날짜 문자열 형식은 단순히 new 키워드를 삭제하고 나머지 표현식을 따옴표로 묶습니다. 

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

중요: 이 날짜 문자열 표현을 사용하면 new Date() 생성자를 사용할 때와 같이 월의 색인이 0부터 시작됩니다 (1월은 0개월, 12월은 11개월).

아래는 이전과 동일한 슈퍼볼 타임라인이지만 이제는 JavaScript 객체 리터럴 표기법과 날짜 문자열 형식을 사용합니다. 

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

    function drawChart() {
      var data = new google.visualization.DataTable({

        cols: [
          {id: 'team', label: 'Team', type: 'string'},
          {id: 'start', label: 'Season Start Date', type: 'date'},
          {id: 'end', label: 'Season End Date', type: 'date'}
        ],

        rows: [
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
          {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
          {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
          {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
          {c: [{v: 'Seattle Seahawks'},     {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
        ]
      });

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

열 라벨이 지정된 첫 번째 배열에서 필요한 열을 type: 'date' 또는 type: 'datetime'로 선언한 경우 arrayToDataTable() 메서드에서 이 형식을 사용할 수도 있습니다. 

var data = google.visualization.arrayToDataTable([
  ["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
  ["Baltimore Ravens",     "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
  ["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
  ["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
  ["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
  ["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
  ["Indianapolis Colts",   "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
  ["New York Giants",      "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
  ["New Orleans Saints",   "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
  ["Green Bay Packers",    "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
  ["New York Giants",      "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
  ["Baltimore Ravens",     "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
  ["Seattle Seahawks",     "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);

Timeofday 사용하기

DataTable timeofday 열 데이터 유형은 각각 시, 분, 초, 밀리초(선택사항)를 나타내는 3~4자리 숫자의 배열을 취합니다. timeofday를 사용하는 것은 값이 날짜로 한정되지 않지만 date 및 datetime는 항상 날짜를 지정한다는 점에서 date 및 datetime를 사용하는 것과 다릅니다.

예를 들어 오전 8시 30분은 [8, 30, 0, 0]이고 네 번째 값은 선택사항입니다([8, 30, 0]는 같은 timeofday 값을 출력함). 

    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }

축, 격자선, 눈금 라벨 형식 지정

날짜, 날짜/시간, timeofday를 사용할 때는 축 라벨, 격자선 라벨의 서식을 지정하거나 특정 방식으로 라벨을 지정하는 것이 좋습니다. 여기에는 여러 가지 방법이 있습니다.

먼저 hAxis.format 또는 vAxis.format 옵션을 사용할 수 있습니다. 이 옵션은 gridlines.count 옵션이 생략된 경우에 적용됩니다. 이 경우 차트의 기본값은 5이며, -1이 아닌 다른 숫자로 설정된 경우에도 적용됩니다. 이렇게 하면 날짜/날짜/시간/시간의 여러 부분에 자리표시자 문자를 사용하는 형식 문자열을 지정할 수 있습니다. 자리표시자와 그 작동 방식에 관한 자세한 내용은 날짜 형식 지정 도구 참조, 특히 pattern 섹션을 참고하세요. 

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Time of Day');
        data.addColumn('number', 'Rating');

        data.addRows([
          [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
          [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
          [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
          [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
          [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
          [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
          [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
          [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
          [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
          [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
          [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
        ]);


        var options = {
          title: 'Rate the Day on a Scale of 1 to 10',
          width: 900,
          height: 500,
          hAxis: {
            format: 'M/d/yy',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        var button = document.getElementById('change');

        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }

또한 두 축의 gridlines 및 minorGridlines 아래에 units 옵션을 포함하여 날짜 및 시간 값의 특정 단위에 대한 형식 지정 규칙을 제공할 수도 있습니다. 이 옵션은 gridlines.count 옵션이 -1로 설정된 경우에만 사용됩니다.

gridlines.units 옵션은 객체이며, 여기에서 계산된 격자선의 날짜/날짜/시간/시간의 여러 측면에 관한 형식을 지정합니다. 차트는 격자선 라벨의 공간에 맞는 첫 번째 형식을 기준으로 격자선을 계산합니다. 년, 월, 일, 시간, 분, 초, 밀리초의 형식을 설정할 수 있습니다.

형식 옵션은 문자열 형식의 배열을 허용하고 형식이 라벨 영역에 맞을 때까지 순서대로 사용합니다. 따라서 형식을 가장 긴 형식에서 짧은 형식 순으로 나열하는 것이 좋습니다. 문자열 형식은 앞서 언급한 날짜 형식 지정 도구 참조와 동일한 패턴을 사용합니다.


위 차트에서 뷰 창을 변경하면 시간이 작은 격자선에서 주요 격자선으로 전환되고 옵션의 형식이 이에 따라 변경된다는 점을 고려하여 hours 단위의 형식이 변경됩니다. 또한 minGridlines는 더 짧은 형식을 사용하는 두 번째 형식을 사용합니다. 첫 번째 형식이 각 인스턴스의 공간에 맞지 않기 때문입니다. 

        hAxis: {
          viewWindow: {
            min: new Date(2014, 11, 31, 18),
            max: new Date(2015, 0, 3, 1)
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['MMM dd']},
              hours: {format: ['HH:mm', 'ha']},
            }
          },
          minorGridlines: {
            units: {
              hours: {format: ['hh:mm:ss a', 'ha']},
              minutes: {format: ['HH:mm a Z', ':mm']}
            }
          }
        }

JavaScript 날짜에 대한 추가 정보

JavaScript Date() 객체에 대해 자세히 알아보려면 Mozilla Developer Network를 참조하세요. 여기에서 JavaScript 날짜 객체