日期和時間

簡介

datedatetime 資料表欄資料類型使用內建的 JavaScript 日期類別。

重要事項:在 JavaScript Date 物件中,月份則會從零開始建立索引,且漲幅為 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() 方法手動建構 DataTable 時,可使用日期建構函式。不過,如果使用 JSON 指定資料,則必須使用字串表示法

JavaScript Date Date 建構函式也可以接受日期字串表示為引數。這個字串可採用多種不同形式,最可靠的表單符合 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 的完整 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 的 Date 建構函式,會在使用者瀏覽器設定的時區傳回所需日期或日期。 您可以透過幾種方式達成設定 Date 物件的特定時區。首先,Google 圖表提供日期格式工具,您可以在其中指定 timeZone。此格式將針對 DataTable 中的每個 datedatetime 值提供格式化值。您也可以將 string 做為引數傳遞至 new Date() 建構函式,或將引數納入 Date.UTC() 方法中,例如:

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

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

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

使用 JavaScript DataTable 物件常值標記法對資料進行序列化,以建立 DataTable 時,無法使用 new Date() 建構函式。相反地,Google Charts 提供了日期字串表示,可讓您在建立 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)"]
]);
  

使用時段功能

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

設定軸軸、格線和 Tick 標籤的格式

使用日期、日期和日期時間時,建議您以特定方式設定軸標籤、格線標籤或刻點標籤的格式。這可透過多種方式達成。

首先,您可以使用 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 日期物件