日期和时间

  1. Overview
  2. 使用日期构造函数的日期和时间
  3. 日期、时间和时区
  4. 使用日期字符串表示形式的日期和时间
  5. 使用 Timeofday
  6. 设置轴、网格线和刻度标签的格式
  7. 有关 JavaScript 日期的更多信息

概览

date 和 datetime DataTable 列数据类型使用内置的 JavaScript Date 类。

重要提示：在 JavaScript 日期对象中，月份从零开始编制索引，一直到十一个月，其中 1 月是第 0 个月，十二月是第 11 个月。

使用日期构造函数的日期和时间

使用日期构造函数的日期

如需创建新的 Date 对象，请使用 new 关键字调用 Date() 构造函数，并通过参数来指定日期的各个组成部分。这些参数采用几个数字的形式，分别对应您的日期的不同属性。 

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

将 Date 构造函数与 date 数据类型一起使用时，您只需指定年、月和日。

Date 构造函数还可以采用以下形式：new Date(Milliseconds)，其中“毫秒”表示所需日期与世界协调时间 (UTC) 1970 年 1 月 1 日 00:00:00 之间的距离（以毫秒为单位）。对于该日期之前的日期和时间，将提供负数毫秒数。

在使用 addColumn()、addRow() 和 addRows() 方法以及 arrayToDataTable() 方法手动构建 DataTable 时，Date 构造函数非常有用。不过，如果使用 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 的完整 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() 构造函数时一样，月份从零开始编入索引（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 与使用 date 和 datetime 的不同之处在于，值并不特定于日期，而 date 和 datetime 始终指定日期。

例如，上午 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.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 单位的格式会发生变化，因为小时从小网格线切换到主网格线，并且选项中的格式会随之变化。另请注意，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 开发者网络是非常实用的资源。您可以在此了解 JavaScript 日期对象