วันที่และเวลา

ภาพรวม

ประเภทข้อมูลของคอลัมน์ date และ datetime ในตารางข้อมูลจะใช้คลาสวันที่ของ JavaScript ในตัว

สําคัญ: ในออบเจ็กต์วันที่ของ JavaScript ระบบจะจัดทําดัชนีเดือนโดยเริ่มต้นที่ 0 และขึ้นไปจนถึง 11 เดือน โดยที่เดือนมกราคมคือ 0 เดือนและเดือนธันวาคมคือวันที่ 11

วันที่และเวลาโดยใช้เครื่องมือสร้างวันที่

วันที่โดยใช้เครื่องมือสร้างวันที่

หากต้องการสร้างออบเจ็กต์วันที่ใหม่ คุณต้องเรียกใช้เครื่องมือสร้าง Date() ด้วยคีย์เวิร์ด new ที่มีอาร์กิวเมนต์เพื่อระบุคอมโพเนนต์ของวัน อาร์กิวเมนต์เหล่านี้จะอยู่ในรูปแบบตัวเลขหลายรายการที่ตรงกับพร็อพเพอร์ตี้ต่างๆ ในวันที่

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

เมื่อใช้เครื่องมือสร้างวันที่กับประเภทข้อมูล date คุณจะต้องระบุปี เดือน และวันเท่านั้น

เครื่องมือสร้างวันที่ยังอยู่ในรูปแบบ new Date(Milliseconds) ได้ด้วย โดยมิลลิวินาทีคือระยะทางในหน่วยมิลลิวินาทีของวันที่ที่ต้องการตั้งแต่วันที่ 1 มกราคม 1970 เวลา 00:00:00 น. (UTC) สําหรับวันที่และเวลาก่อนวันที่ดังกล่าว ระบบจะระบุจํานวนมิลลิวินาทีที่เป็นค่าลบ

เครื่องมือสร้างวันที่จะมีประโยชน์เมื่อสร้างตารางตารางด้วยตนเองโดยใช้เมธอด 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'))

คําเตือน: การแสดงสตริงในตัวสร้างวันที่อาจมีการแยกวิเคราะห์แตกต่างกันโดยเบราว์เซอร์และเบราว์เซอร์ต่างๆ กัน ดังนั้นจะแสดงวันที่ที่ต่างกันสําหรับสตริงเดียวกัน ดังนั้นจึงไม่แนะนําให้ส่งสตริงไปยังเครื่องมือสร้างวันที่ แต่เราขอแนะนําให้ใช้ตัวเลขสําหรับอาร์กิวเมนต์เครื่องมือสร้างวันที่เท่านั้น

ไทม์ไลน์ด้านล่างแสดงแชมป์ Super Bowl ในแต่ละฤดูกาลของ NFL ตั้งแต่ปี 2000


ด้านล่างนี้คือโค้ดสําหรับสร้างไทม์ไลน์นี้ สังเกตการใช้ตัวสร้าง 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);
    }
  

วันที่และเวลาโดยใช้เครื่องมือสร้างวันที่

ประเภทข้อมูลของคอลัมน์ข้อมูล datetime ในตารางใช้ตัวสร้างวันที่เดียวกันกับประเภทข้อมูล date แต่ตอนนี้ใช้อาร์กิวเมนต์ทั้งหมดในการกรอกเวลา

หรือมีการส่งสตริงสตริง datetime ไปยังเครื่องมือสร้างวันที่ด้วย การชดเชยเวลาของ datetime ประกอบด้วยการเพิ่มชั่วโมง นาที และวินาที เพิ่มเติมจากการชดเชยเขตเวลา 4 หลัก (เช่น เวลามาตรฐานแปซิฟิก (PST) คือ -0800) สําหรับข้อกําหนด RFC 2822 ระบบจะเพิ่มเวลาและเขตเวลาด้วยการเว้นวรรคระหว่างวันที่และเวลา รวมถึงเวลาและเขตเวลา ในข้อกําหนด ISO 8601 ไม่มีช่องว่าง แต่ตามด้วยวันที่ตามด้วย "T" เป็นตัวพิมพ์ใหญ่เพื่อแสดงถึงคอมโพเนนต์เวลา นอกจากนี้ยังไม่มีช่องว่างระหว่างเวลาและการชดเชยเขตเวลา สตริงวันที่ datetime แบบเต็มของวันที่ 6 ธันวาคม 2014 เวลา 10:30 น. PST จะมีลักษณะดังนี้

  • 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 Charts จะแสดงตัวจัดรูปแบบวันที่ที่คุณจะระบุ timeZone ได้ วิธีนี้จะระบุค่าที่จัดรูปแบบสําหรับค่า date และ datetime แต่ละรายการในตารางข้อมูล หรืออาจส่ง string เป็นอาร์กิวเมนต์ไปยังเครื่องมือสร้าง new Date() หรือจะตัดอาร์กิวเมนต์ด้วยเมธอด Date.UTC() ก็ได้ เช่น

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

วิธีนี้จะตั้งค่าออบเจ็กต์วันที่เป็นวันที่และเวลาที่ระบุในเขตเวลา UTC (GMT) จากนั้นคุณสามารถคํานวณออฟเซ็ตที่ต้องการสําหรับเขตเวลา รวมถึงตั้งวันที่และเวลาได้ตามต้องการ

วันที่และเวลาที่ใช้การแสดงสตริงวันที่

เมื่อเรียงลําดับข้อมูลโดยใช้รูปแบบตัวอักษรของออบเจ็กต์ตารางข้อมูล JavaScript เพื่อสร้างตารางข้อมูล คุณจะใช้ตัวสร้าง new Date() ไม่ได้ แต่ Google Charts จะแสดงการนําเสนอสตริงวันที่ที่อนุญาตให้ทําการเรียงลําดับและแยกวิเคราะห์ date หรือ datetime ได้อย่างเหมาะสมเมื่อสร้างตารางข้อมูล รูปแบบสตริงวันที่นี้จะหยุดเพียงคีย์เวิร์ด new และใส่นิพจน์ที่เหลือในเครื่องหมายคําพูด

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

สําคัญ: เมื่อใช้การแสดงสตริงวันที่นี้ เช่นเดียวกับเมื่อใช้เครื่องมือสร้าง new Date() ระบบจะจัดทําดัชนีเดือนโดยเริ่มต้นที่ 0 (มกราคมคือวันที่ 0 ธันวาคม เดือนธันวาคมคือเดือนที่ 11)

ด้านล่างนี้เป็นไทม์ไลน์ Super Bowl เดียวกันกับก่อนหน้านี้ แต่ตอนนี้ใช้สัญพจน์ของออบเจ็กต์ 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)"]
]);
  

การทํางานกับเวลาทํางาน

ประเภทข้อมูลของคอลัมน์ DataData 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);
        };
      }
  

คุณยังระบุกฎการจัดรูปแบบสําหรับค่าของวันที่และเวลาที่เฉพาะเจาะจงได้โดยใส่ตัวเลือก units ในส่วน gridlines และ minorGridlines สําหรับทั้ง 2 แกน ตัวเลือกนี้จะใช้ได้ก็ต่อเมื่อตั้งค่าตัวเลือก gridlines.count เป็น -1

ตัวเลือก gridlines.units เป็นออบเจ็กต์ที่ระบุรูปแบบสําหรับมุมมองวันที่/เวลา/เวลาต่างๆ สําหรับตารางกริดที่คํานวณแล้ว และแผนภูมิจะคํานวณเส้นตารางโดยอิงตามรูปแบบแรกที่เหมาะกับพื้นที่สําหรับป้ายกํากับตารางกริด คุณสามารถตั้งค่ารูปแบบสําหรับปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที

ตัวเลือกรูปแบบจะยอมรับอาร์เรย์ของรูปแบบสตริง และจะใช้รูปแบบเหล่านั้นตามลําดับจนกว่ารูปแบบนั้นจะสอดคล้องกับพื้นที่ป้ายกํากับ ด้วยเหตุนี้ เราจึงแนะนําให้แสดงรูปแบบตามลําดับจากยาวที่สุดไปสั้นที่สุด รูปแบบสตริงจะใช้รูปแบบเดียวกันกับการอ้างอิงรูปแบบวันที่ที่กล่าวถึงก่อนหน้านี้


โปรดทราบว่าในแผนภูมิด้านบน เมื่อเปลี่ยนหน้าต่างมุมมอง รูปแบบสําหรับหน่วย hours จะเปลี่ยนแปลง เนื่องจากชั่วโมงนั้นเปลี่ยนจากตารางกริดย่อยไปเป็นตารางกริดหลัก และรูปแบบของตัวเลือกจะเปลี่ยนไป นอกจากนี้ โปรดทราบว่า myGridlines จะใช้รูปแบบที่ 2 ที่สั้นลง เนื่องจากรูปแบบแรกจะไม่สอดคล้องกับการเว้นวรรคในแต่ละอินสแตนซ์

        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

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์ Date() ของ JavaScript เครือข่ายนักพัฒนาซอฟต์แวร์ Mozilla เป็นแหล่งข้อมูลที่ดี ซึ่งคุณจะดูข้อมูลทั้งหมดเกี่ยวกับออบเจ็กต์วันที่ของ JavaScript ได้"