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

ภาพรวม

ประเภทข้อมูลคอลัมน์ DataTable 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) สำหรับวันที่และเวลาก่อนวันที่ดังกล่าว ระบบจะแสดงจำนวนมิลลิวินาทีที่เป็นค่าลบ

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

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

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

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

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

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

เมื่อเรียงลำดับข้อมูลโดยใช้รูปแบบลิเทอรัลออบเจ็กต์ DataTable ของ JavaScript เพื่อสร้าง DataTable คุณจะใช้ตัวสร้าง new Date() ไม่ได้ แต่ Google แผนภูมิจะแสดงแทนสตริงวันที่ที่ช่วยให้ date หรือ datetime ได้รับการทำให้เป็นอนุกรมและแยกวิเคราะห์ได้อย่างถูกต้องเมื่อสร้าง DataTable รูปแบบสตริงวันที่นี้จะตัดคีย์เวิร์ด 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)"]
]);
  

การทำงานกับเวลาของวัน

ประเภทข้อมูลคอลัมน์ timeofday ของ DataTable ใช้อาร์เรย์ตัวเลข 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 ซึ่งจะช่วยให้คุณระบุสตริงรูปแบบที่คุณใช้ตัวอักษรตัวยึดตำแหน่งสำหรับส่วนต่างๆ ของวันที่/วันที่และเวลา/timeofday ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวยึดตำแหน่งและวิธีการทำงานของตัวยึดตำแหน่งได้ในข้อมูลอ้างอิงตัวจัดรูปแบบวันที่ โดยเฉพาะในส่วน 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 จะเปลี่ยนไป เนื่องจากเวลาทำการจะเปลี่ยนจากเส้นตารางย่อยเป็นเส้นตารางหลัก และรูปแบบในตัวเลือกจะเปลี่ยนไปตามนั้น นอกจากนี้ โปรดทราบว่าเส้นตารางย่อยจะใช้รูปแบบที่ 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 ได้