날짜 및 시간

  1. 개요
  2. 날짜 생성자를 사용한 날짜 및 시간
  3. 날짜, 시간, 시간대
  4. 날짜 문자열 표현을 사용하는 날짜 및 시간
  5. Timeofday 작업
  6. 축, 격자선, 체크 라벨 서식 지정하기
  7. 자바스크립트 날짜 자세히 알아보기

개요

date 및 datetime DataTable 열 데이터 유형은 기본 제공 자바스크립트 날짜 클래스를 활용합니다.

중요: 자바스크립트 날짜 객체에서 월은 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을 사용하여 데이터를 지정하는 경우 문자열 표현을 사용해야 합니다.

자바스크립트 날짜 생성자는 날짜의 문자열 표현을 인수로 사용할 수도 있습니다. 이 문자열은 다양한 형식을 취할 수 있습니다. 가장 신뢰할 수 있는 양식은 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'))

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

아래 타임라인은 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))

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

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

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

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

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

다음은 전과 동일한 슈퍼볼 타임라인입니다. 하지만 이제는 자바스크립트 객체 리터럴 표기법과 날짜 문자열 형식을 사용합니다. 

    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));
    }

축, 격자선, 틱 라벨 서식 지정

날짜, 날짜/시간, 시간대의 작업 시 축 라벨, 격자선 라벨 또는 눈금 라벨을 특정 방식으로 지정하는 것이 좋습니다. 이는 여러 가지 방법으로 가능합니다.

먼저 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 단위의 형식이 변경됩니다. 단, 영업시간이 마이너에서 격자선으로 변경되고 옵션의 형식은 그에 따라 변경됩니다. 또한 보조 그리드가 두 번째 더 짧은 형식을 사용합니다. 첫 번째 형식은 각 인스턴스의 공간에 맞지 않기 때문입니다. 

        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']}
            }
          }
        }

자바스크립트 날짜에 관한 추가 정보

자바스크립트 Date() 객체에 관해 자세히 알아보려면 Mozilla 개발자 네트워크를 확인해 보세요. 여기에서 자바스크립트 날짜 객체