日期和时间

概览

datedatetime DataTable 列数据类型使用内置的 JavaScript Date 类。

重要提示:在 JavaScript 日期对象中,月份的索引从 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 开始)的毫秒数。对于该日期之前的日期和时间,将显示负数(以毫秒为单位)。

使用 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 构造函数中的字符串表示法可能会因浏览器和不同浏览器版本而异,因此针对同一个字符串返回不同的日期。因此,不建议将字符串传入日期构造函数。相反,建议仅使用日期构造函数的参数。

下面的时间轴显示了 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 的字符串表示形式传入日期构造函数。除了 4 位数的时区偏移量(例如,太平洋标准时间 (PST) 为 -0800)之外,datetime 的字符串表示形式还包括小时、分钟和秒。对于 RFC 2822 规范,系统会添加日期和时间,并在日期和时间之间加上空格和时区。在 ISO 8601 规范中,没有空格,相反日期后跟一个大写的“T”,表示时间组成部分。此外,该时间与时区偏移量之间没有空格。太平洋标准时间 2014 年 12 月 6 日上午 10:30 的完整 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);
    }
  

日期、时间和时区

如果使用日期构造函数(对于 datedatetime),系统将以用户浏览器设置的时区返回所需的日期或日期时间。可以通过多种方式将日期对象设置为特定时区。首先,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 时正确序列化和解析 datedatetime。此日期字符串格式会直接丢弃 new 关键字,并将其余的表达式用引号括起来:

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

重要提示:使用此日期字符串表示法时,与使用 new Date() 构造函数一样,月份会从零开始编制索引(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);
    }
  

您也可以在 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

DataTable timeofday 列数据类型接受由 3 个或 4 位数字表示的数组,分别表示小时、分钟、秒和可选毫秒。使用 timeofday 不同于使用 datedatetime,因为值并非特定于日期,而 datedatetime 始终会指定日期。

例如,时间是上午 8:30,即 [8, 30, 0, 0],第 4 个值是可选的([8, 30, 0] 将输出相同的时间值)。

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

您还可以在特定轴的日期和时间值中设置格式规则,只需在这两个轴的 gridlinesminorGridlines 下添加 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']}
            }
          }
        }
  

详细了解 JavaScript 日期

如果您想详细了解 JavaScript Date() 对象,Mozilla 开发者网络是一个很好的资源。在这里,您可以详细了解 JavaScript 日期对象。