Ngày và giờ

  1. Tổng quan
  2. Ngày và giờ sử dụng hàm khởi tạo ngày
  3. Ngày, giờ và múi giờ
  4. Ngày và giờ trình bày bằng chuỗi ngày
  5. Làm việc với Timeofday
  6. Định dạng trục, lưới và nhãn đánh dấu
  7. Thông tin khác về ngày JavaScript

Tổng quan

Các loại dữ liệu cột DataTable date và datetime sử dụng lớp Ngày tích hợp JavaScript tích hợp sẵn.

Lưu ý quan trọng: Trong các đối tượng Ngày JavaScript, các tháng được lập chỉ mục bắt đầu từ 0 và tăng lên thông qua 11, với tháng 1 là tháng 0 và tháng 12 là tháng 11.

Ngày và giờ sử dụng hàm khởi tạo ngày

Ngày sử dụng hàm khởi tạo ngày

Để tạo một đối tượng Ngày mới, bạn gọi hàm khởi tạo Date() bằng từ khoá new, với các đối số để chỉ định các thành phần của ngày. Những đối số này có dạng nhiều số tương ứng với các thuộc tính khác nhau trong ngày của bạn. 

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

Khi sử dụng hàm khởi tạo Ngày với loại dữ liệu date, bạn chỉ cần chỉ định Năm, Tháng và Ngày.

Hàm khởi tạo Ngày cũng có thể có dạng: new Date(Milliseconds), trong đó Mili giây là khoảng cách tính bằng mili giây của ngày mong muốn kể từ ngày 1 tháng 1 năm 1970 00:00:00 giờ UTC. Đối với các ngày và giờ trước ngày đó, số mili giây âm sẽ được cung cấp.

Việc sử dụng hàm khởi tạo Ngày rất hữu ích khi tạo Bảng dữ liệu theo cách thủ công bằng các phương thức addColumn(), addRow() và addRows(), cũng như phương thức arrayToDataTable(). Tuy nhiên, nếu bạn sử dụng JSON để chỉ định dữ liệu, thì bạn cần sử dụng tính năng biểu diễn chuỗi.

Hàm khởi tạo Ngày JavaScript cũng có thể chấp nhận một chuỗi đại diện của ngày làm đối số. Chuỗi này có thể có nhiều dạng khác nhau. Các biểu mẫu đáng tin cậy nhất tuân thủ quy cách RFC 2822 hoặc quy cách ISO 8601. Những định dạng cho những định dạng này là:

  • RFC 2822 — 'MMM DD, YYYY' hoặc 'DD MMM, YYYY' (Ví dụ: new Date('Jan 1, 2015') hoặc new Date('1 Jan, 2015'))
  • ISO 8601 — 'YYYY-MM-DD' (Ví dụ: new Date('2015-01-01'))

Cảnh báo: Cách biểu thị dạng chuỗi trong hàm dựng Ngày có thể được phân tích cú pháp theo những cách riêng cho từng trình duyệt và phiên bản trình duyệt. Do đó, hệ thống sẽ trả về các ngày khác nhau cho cùng một chuỗi. Do đó, bạn không nên chuyển các chuỗi vào hàm khởi tạo Ngày. Thay vào đó, bạn chỉ nên sử dụng số cho các đối số của hàm khởi tạo ngày.

Tiến trình dưới đây cho thấy nhà vô địch Super Bowl của mỗi mùa giải NFL kể từ năm 2000.


Sau đây là mã để tạo tiến trình này. Lưu ý việc sử dụng hàm dựng new Date() và số lượng được cung cấp cho mỗi ngày bằng cách sử dụng số tháng dựa trên 0 như đã đề cập trước đó. 

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

Ngày giờ sử dụng hàm khởi tạo ngày

Loại dữ liệu cột DataTable datetime sử dụng cùng một hàm khởi tạo Ngày như loại dữ liệu date, nhưng hiện sử dụng tất cả đối số để điền vào thời gian.

Ngoài ra, một chuỗi đại diện của datetime cũng có thể được chuyển vào hàm khởi tạo Ngày. Một cách biểu thị chuỗi của datetime bao gồm thêm giờ, phút và giây, ngoài độ lệch múi giờ gồm 4 chữ số (ví dụ: Giờ chuẩn Thái Bình Dương (PST) là -0800). Đối với thông số RFC 2822, thời gian và múi giờ được thêm vào bằng các dấu cách giữa ngày và giờ, giờ và múi giờ. Trong quy cách ISO 8601, không có dấu cách, thay vào đó, ngày này được viết hoa bằng chữ "T" để biểu thị thành phần thời gian. Ngoài ra còn có khoảng trống giữa thời gian và độ lệch múi giờ. Chuỗi datetime đầy đủ cho ngày 6 tháng 12 năm 2014 lúc 10:30 sáng giờ PST sẽ là:

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

Cảnh báo: Một lần nữa, cách biểu thị chuỗi có thể được phân tích cú pháp theo những cách riêng cho từng trình duyệt/phiên bản. Đáng chú ý là khi xử lý thời gian và múi giờ, sẽ có sự khác biệt về việc liệu ngày giờ có được trả về theo múi giờ UTC (GMT) hay không hoặc có được bù trừ và trả về theo giờ địa phương hay không. Đây là một lý do khác khiến bạn không nên sử dụng chuỗi ngày giờ.

Tiến trình dưới đây phân tích một ngày trung bình bằng cách sử dụng loại dữ liệu ngày giờ. 

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

Ngày, giờ và múi giờ

Sử dụng hàm khởi tạo Ngày, cho date hoặc datetime, sẽ trả về ngày hoặc giờ mong muốn trong múi giờ do trình duyệt của người dùng đặt. Bạn có thể đặt đối tượng Ngày thành múi giờ cụ thể theo một số cách. Trước tiên, Biểu đồ của Google cung cấp một Trình định dạng ngày, trong đó bạn có thể chỉ định timeZone. Thao tác này sẽ cung cấp một giá trị được định dạng cho mỗi giá trị date và datetime trong DataTable của bạn. Bạn cũng có thể truyền một chuỗi làm đối số cho hàm khởi tạo new Date(), hoặc bạn có thể gói đối số trong phương thức Date.UTC(), chẳng hạn như: 

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

Thao tác này sẽ đặt đối tượng Ngày thành ngày và giờ được chỉ định theo múi giờ UTC (GMT). Từ đó, bạn có thể tính toán mức chênh lệch theo mong muốn cho múi giờ và đặt ngày và giờ theo ý muốn.

Ngày và giờ sử dụng nội dung trình bày trong chuỗi ngày

Khi chuyển đổi tuần tự dữ liệu bằng cách sử dụng ký hiệu giá trị cố định đối tượng DataTable của JavaScript để tạo DataTable, bạn không thể sử dụng hàm khởi tạo new Date(). Thay vào đó, Google Chart cung cấp biểu diễn chuỗi Ngày cho phép date hoặc datetime của bạn được tuần tự hoá và phân tích cú pháp đúng cách khi tạo DataTable. Định dạng chuỗi Ngày này chỉ cần xoá từ khoá new và gói biểu thức còn lại trong dấu ngoặc kép: 

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

Lưu ý quan trọng: Khi sử dụng Biểu thức chuỗi ngày này, cũng như khi sử dụng hàm khởi tạo new Date(), các tháng được lập chỉ mục từ 0 (tháng 1 là tháng 0, tháng 12 là tháng 11).

Dưới đây là dòng thời gian Super Bowl giống như trước đây, nhưng hiện sử dụng ký hiệu cố định đối tượng JavaScript và định dạng chuỗi Ngày. 

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

Bạn cũng có thể sử dụng định dạng này trong phương thức arrayToDataTable(), miễn là trong mảng đầu tiên có nhãn cột được chỉ định, bạn khai báo cột cần thiết là type: 'date' hoặc 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)"]
]);

Làm việc cùng ngày

Loại dữ liệu cột DataTable timeofday lấy một mảng gồm 3 hoặc 4 số, tương ứng với giờ, phút, giây và mili giây tương ứng. Việc sử dụng timeofday khác với việc sử dụng date và datetime ở chỗ các giá trị không chỉ dành riêng cho một ngày, trong khi date và datetime luôn chỉ định một ngày.

Ví dụ: thời gian 8:30 sáng sẽ là: [8, 30, 0, 0], với giá trị thứ 4 là không bắt buộc ([8, 30, 0] sẽ xuất ra cùng giá trị thời gian trong ngày). 

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

Trục định dạng, Nhãn lưới và Nhãn đánh dấu

Khi làm việc với ngày, giờ và ngày giờ, bạn nên định dạng nhãn trục, nhãn lưới hoặc nhãn đánh dấu theo một cách cụ thể. Bạn có thể thực hiện việc này theo một số cách.

Trước tiên, bạn có thể sử dụng tuỳ chọn hAxis.format hoặc vAxis.format. Tùy chọn này áp dụng khi tùy chọn gridlines.count bị bỏ qua. Trong trường hợp đó, biểu đồ sẽ mặc định có số lượng là 5, và khi tùy chọn được đặt thành một số khác -1. Điều này cho phép bạn chỉ định một chuỗi định dạng, trong đó bạn sử dụng chữ cái giữ chỗ cho các phần khác nhau của ngày hoặc ngày/giờ trong ngày. Vui lòng xem tài liệu tham khảo trình định dạng ngày, cụ thể là phần pattern để biết thêm thông tin về phần giữ chỗ và cách thức hoạt động. 

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

Bạn cũng có thể cung cấp quy tắc định dạng cho các đơn vị ngày và giờ cụ thể bằng cách thêm tùy chọn units trong gridlines và minorGridlines cho cả hai trục. Tuỳ chọn này chỉ được sử dụng nếu bạn đặt tuỳ chọn gridlines.count thành -1.

Tùy chọn gridlines.units là một đối tượng, trong đó bạn chỉ định định dạng cho các khía cạnh khác nhau của ngày/ngày/giờ trong ngày cho đường lưới được tính toán và biểu đồ của bạn sẽ tính toán các đường lưới dựa trên định dạng đầu tiên phù hợp với không gian cho nhãn lưới. Bạn có thể đặt các định dạng theo năm, tháng, ngày, giờ, phút, giây và mili giây.

Tùy chọn định dạng chấp nhận một loạt các định dạng chuỗi và sẽ sử dụng các định dạng đó theo thứ tự cho đến khi một định dạng phù hợp với vùng nhãn. Vì lý do này, bạn nên liệt kê các định dạng theo thứ tự từ dài nhất đến ngắn nhất. Các định dạng chuỗi sử dụng cùng mẫu như tham chiếu trình định dạng ngày đã đề cập trước đó.


Xin lưu ý rằng trong biểu đồ trên, khi thay đổi cửa sổ chế độ xem, định dạng của đơn vị hours sẽ thay đổi, theo đó các giờ làm việc sẽ chuyển từ đường lưới nhỏ sang đường lưới chính, và định dạng trong các tùy chọn sẽ thay đổi theo. Ngoài ra, xin lưu ý rằng tủ lạnh nhỏ đang sử dụng các định dạng thứ hai ngắn hơn, vì các định dạng đầu tiên không vừa với không gian trong mỗi bản sao. 

        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']}
            }
          }
        }

Thông tin thêm về ngày JavaScript

Nếu bạn muốn tìm hiểu thêm về đối tượng Date() của JavaScript, Mạng nhà phát triển Mozilla là một tài nguyên tuyệt vời. Tại đó, bạn có thể tìm hiểu về mọi đối tượng Ngày JavaScript.