日期和時間

  1. Overview
  2. 使用日期建構函式的日期和時間
  3. 日期、時間和時區
  4. 使用日期字串表示法的日期和時間
  5. 使用時段
  6. 設定軸格式、格線和刻度標籤
  7. 進一步瞭解 JavaScript 日期

總覽

date 和 datetime 資料表資料欄資料類型會使用內建的 JavaScript 日期類別。

重要事項：在 JavaScript Date 物件中，月份會從 0 開始索引，再到 11 天，1 月是 0 日，12 月則是 11 日。

使用日期建構函式的日期和時間

使用日期建構函式的日期

如要建立新的 Date 物件，請使用 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() 方法手動建構資料表時，使用日期建構函式會很實用。但如果使用 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 資料類型相同的 Date 建構函式，但現在使用所有引數來填入時間。

此外，您也可以將 datetime 的字串表示方式傳遞至 Date 建構函式。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。

警告：再次提醒您，字串表示方式可能因瀏覽器/版本而異。值得注意的是，在處理時間和時區時，日期時間是否會以世界標準時間 (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 使用日期建構函式，系統會按照使用者瀏覽器設定的時區傳回所需日期或日期時間。透過幾種方式，您可以將 Date 物件設為特定時區。首先，Google 圖表提供日期格式工具，您可在當中指定 timeZone。這項操作會針對 DataTable 中的每個 date 和 datetime 值提供格式化值。您也可以將「字串」做為引數傳入 new Date() 建構函式，也可以在 Date.UTC() 方法中納入引數，例如：

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

這會將 Date 物件設為以世界標準時間 (GMT) 時區為準的指定日期和時間。接著，您可以計算所需的時區偏移量，並視需要設定日期和時間。

使用日期字串表示法的日期和時間

使用 JavaScript DataTable 物件常值標記法執行資料序列化作業時，無法使用 new Date() 建構函式。Google 圖表提供日期字串表示，可讓您在建立資料表時正確序列化並剖析 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 資料欄資料類型採用 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 單位的格式會隨之變更，因為該時段會從小幅切換至主要格線，且選項的格式會隨之變更。另請注意，由於第一種格式並不適合每個執行個體的空間，因此次要格線會使用第二個較短的格式。

        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 日期物件