Даты и время

Обзор

Типы данных столбца date и datetime DataTable используют встроенный класс Date JavaScript.

Важно: В объектах даты JavaScript месяцы индексируются, начиная с нуля и заканчивая одиннадцатью, при этом январь — это месяц 0, а декабрь — месяц 11.

Даты и время с использованием конструктора даты

Даты с использованием конструктора дат

Чтобы создать новый объект Date, вы вызываете конструктор Date() с ключевым словом new и аргументами для указания компонентов даты. Эти аргументы принимают форму нескольких чисел, соответствующих различным свойствам вашей даты.

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

При использовании конструктора Date с типом данных date вам нужно указать только год, месяц и день.

Конструктор Date также может иметь форму: new Date(Milliseconds) , где Milliseconds — это расстояние в миллисекундах от желаемой даты от 1 января 1970 года 00:00:00 UTC. Для дат и времени до этой даты будет указано отрицательное число миллисекунд.

Использование конструктора Date полезно при создании DataTable вручную с использованием addColumn() , addRow() и addRows() , а также метода arrayToDataTable() . Однако при использовании 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. Вместо этого рекомендуется использовать только числа для аргументов конструктора Date.

На временной шкале ниже показаны чемпионы Суперкубка каждого сезона НФЛ с 2000 года.

Ниже приведен код для создания этой временной шкалы. Обратите внимание на использование конструкторов 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);
    }
  

Дата и время с использованием конструктора даты

Тип данных столбца datetime и времени DataTable использует тот же конструктор Date, что и тип данных date , но теперь использует все аргументы для заполнения времени.

Кроме того, строковое представление datetime также может быть передано в конструктор Date. Строковое представление datetime и времени состоит из добавления часов, минут и секунд в дополнение к 4-значному смещению часового пояса (например, стандартное тихоокеанское время (PST) равно -0800). Для спецификации RFC 2822 время и часовой пояс добавляются с пробелами между датой и временем, а также между временем и часовым поясом. В спецификации ISO 8601 пробелов нет, вместо этого за датой следует прописная буква «T», обозначающая компонент времени. Также нет пробела между временем и смещением часового пояса. Полная datetime и времени для 6 декабря 2014 г. в 10:30 по тихоокеанскому стандартному времени будет выглядеть так:

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

Предупреждение. Опять же, строковое представление может обрабатываться по-разному в разных браузерах/версиях. Примечательно, что при работе со временем и часовыми поясами существуют различия в том, возвращается ли дата-время с часовым поясом UTC (GMT) или смещается и возвращается по местному времени. Это еще одна причина, по которой использование строк даты и времени не рекомендуется .

На приведенной ниже временной шкале средний день разбит на части с использованием типа данных datetime.

    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 для date или datetime и времени вернет желаемую дату или дату и время в часовом поясе, установленном браузером пользователя. Установка объекта Date в определенный часовой пояс может быть достигнута несколькими способами. Во-первых, Google Charts предоставляет средство форматирования даты , в котором вы можете указать timeZone . Это предоставит отформатированное значение для каждого из ваших значений date и даты и datetime в вашем DataTable. Вы также можете передать строку в качестве аргумента конструктору new Date() или обернуть свои аргументы в метод Date.UTC() , например:

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

Это установит объект Date на указанную дату и время в часовом поясе UTC (GMT). Оттуда вы можете рассчитать желаемое смещение для часового пояса и установить даты и время по желанию.

Даты и время с использованием представления строки даты

При сериализации данных с использованием литеральной нотации объекта JavaScript DataTable для построения DataTable нельзя использовать конструктор new Date() . Вместо этого Google Charts предоставляет строковое представление даты, которое позволяет сериализовать и правильно анализировать вашу date или datetime и время при создании DataTable. Этот формат строки даты просто удаляет new ключевое слово и заключает оставшееся выражение в кавычки:

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

Важно: при использовании этого представления строки даты, как и при использовании конструктора new Date() , месяцы индексируются, начиная с нуля (январь — месяц 0, декабрь — месяц 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);
    }
  

Этот формат также можно использовать в arrayToDataTable() при условии, что в первом массиве, где указаны метки столбцов, вы объявляете нужный столбец как имеющий type: 'date' или type: 'datetime' .

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

Тип данных столбца timeofday DataTable принимает массив из 3 или 4 чисел, представляющих часы, минуты, секунды и, возможно, миллисекунды соответственно. Использование timeofday отличается от использования date и datetime тем, что значения не привязаны к дате, тогда как date и datetime всегда указывают дату.

Например, время 8:30 утра будет: [8, 30, 0, 0] , а 4-е значение является необязательным ( [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);
        };
      }
  

Вы также можете указать правила форматирования для определенных единиц значений даты и времени, включив параметр units в линии gridlines и minorGridlines сетки для обеих осей. Этот параметр будет использоваться только в том случае, если для параметра gridlines.count установлено значение -1.

Параметр gridlines.units — это объект, в котором вы указываете формат для различных аспектов даты/даты-времени/времени дня для вычисляемой линии сетки, и ваша диаграмма будет вычислять линии сетки на основе первого формата, который соответствует пространству для метки линии сетки. Вы можете установить форматы для лет, месяцев, дней, часов, минут, секунд и миллисекунд.

Опция формата принимает массив строковых форматов и будет использовать их по порядку, пока формат не будет соответствовать области метки. По этой причине рекомендуется перечислять форматы в порядке от самого длинного к самому короткому. В строковых форматах используются те же шаблоны, что и в справочнике по форматированию даты , упомянутом ранее.

Обратите внимание, что на приведенной выше диаграмме при смене окна просмотра формат единицы hours меняется, учитывая, что часы переключаются с второстепенных линий сетки на основные, и вместе с ними меняется формат в параметрах. Также обратите внимание, что в minorGridlines используются вторые, более короткие форматы, поскольку первые форматы не вмещают пространство в каждом экземпляре.

        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 Date.