ลำดับเวลา

  1. ภาพรวม
  2. ตัวอย่างง่ายๆ
  3. การติดป้ายกำกับแถบต่างๆ
  4. ตัวอย่างขั้นสูง
  5. การใส่แถบใน 1 แถว
  6. การเปลี่ยนแบบอักษร
  7. การควบคุมสี
  8. เส้นตารางซ้อนกัน
  9. เคล็ดลับเครื่องมือการปรับแต่ง
  10. กำลังโหลด
  11. รูปแบบข้อมูล
  12. ตัวเลือกการกำหนดค่า
  13. เมธอด
  14. เหตุการณ์
  15. นโยบายข้อมูล

ภาพรวม

ไทม์ไลน์คือแผนภูมิที่แสดงว่ามีการใช้ชุดทรัพยากรอย่างไรเมื่อเวลาผ่านไป ถ้าคุณจัดการโครงการซอฟต์แวร์ และต้องการอธิบายว่าใครกำลังทำอะไรและเมื่อใด หรือถ้าคุณจะจัดประชุมและต้องวางกำหนดการห้องประชุม ไทม์ไลน์มักเป็นตัวเลือกที่มีการแสดงผลอย่างสมเหตุสมผล ไทม์ไลน์ประเภทหนึ่งที่ได้รับความนิยมคือแผนภูมิแกนต์

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

ตัวอย่างง่ายๆ

สมมติว่าคุณต้องการวางแผน เวลาที่ประธานาธิบดีอเมริกันดำรงตำแหน่ง ตรงนี้คือ "แหล่งข้อมูล" คือตำแหน่งประธานาธิบดี และเราสามารถยกวาระตำแหน่งประธานาธิบดีแต่ละคนเป็นเกณฑ์ได้ ดังนี้

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

หลังจากโหลดแพ็กเกจ timeline และกำหนดการเรียกกลับเพื่อวาดแผนภูมิเมื่อแสดงผลหน้าเว็บ เมธอด drawChart() จะสร้างอินสแตนซ์ google.visualization.Timeline() จากนั้นเติม dataTable ด้วย 1 แถวสำหรับประธานแต่ละราย

ภายใน dataTable คอลัมน์แรกเป็นชื่อประธานาธิบดี คอลัมน์ที่ 2 และ 3 คือเวลาเริ่มต้นและสิ้นสุด ซึ่งมีประเภท Date ของ JavaScript แต่อาจเป็นตัวเลขธรรมดาก็ได้

สุดท้าย เราเรียกใช้เมธอด draw() ของแผนภูมิ ซึ่งจะแสดงภายใน div ด้วยตัวระบุเดียวกันกับ (timeline) ซึ่งใช้เมื่อมีการประกาศ container ในบรรทัดแรกของ drawChart()

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

คุณสามารถปรับแต่งไทม์ไลน์ใน Google แผนภูมิได้ และในตัวอย่างต่อไปนี้ เราจะแสดงวิธีทั่วไปบางส่วนในการปรับแต่งลักษณะที่ปรากฏของไทม์ไลน์ของคุณ

การติดป้ายกำกับแถบ

นอกเหนือจากป้ายกำกับแถว ("Washington", "Adams", "Jefferson" ด้านบน) แล้ว คุณยังติดป้ายกำกับแต่ละแถบได้ด้วย เราเปลี่ยนป้ายกำกับแถวเป็นตัวเลขง่ายๆ แล้วใส่ชื่อประธานาธิบดีแต่ละคนในแถบ

ในโค้ดนี้ เราได้แทรกคอลัมน์ใหม่ลงในข้อมูลเพื่อเก็บป้ายกำกับแท่ง ซึ่งก็คือชื่อเต็มของประธานาธิบดีแต่ละคน เมื่อมี 4 คอลัมน์ในไทม์ไลน์ dataTable คอลัมน์แรกจะตีความเป็นป้ายกำกับแถว คอลัมน์ที่ 2 เป็นป้ายกำกับแท่ง และคอลัมน์ที่ 3 และ 4 เป็นจุดเริ่มต้นและสิ้นสุด

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

ป้ายกำกับแถวใหม่ด้านบนให้ข้อมูลไม่ค่อยชัดเจนนัก จึงจะนำออกด้วยตัวเลือกshowRowLabelsของไทม์ไลน์

โดยค่าเริ่มต้น showRowLabels จะเป็น true การตั้งค่าเป็น false จะนำป้ายกำกับแถวออก

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

ตัวอย่างขั้นสูง

เพื่อให้ไทม์ไลน์ซับซ้อนขึ้น ลองเพิ่มรองประธานาธิบดีและเลขาธิการของรัฐลงในแผนภูมิ จอห์น อดัมส์ เป็นรองประธานบริษัทก่อนที่จะขึ้นเป็นประธานาธิบดี และโทมัส เจฟเฟอร์สันเป็นเลขาธิการรัฐ ต่อด้วยรองประธาน และสุดท้ายคือประธาน

ในไทม์ไลน์ ทรัพยากรจะมีสีเดียวกันแม้ว่าทรัพยากรนั้นจะปรากฏในหลายแถว ดังนั้นในแผนภูมิต่อไปนี้ ผู้ใช้แต่ละคนจะมีสีที่สอดคล้องกัน

เลขาธิการรัฐบางส่วนให้บริการในระยะเวลาสั้นๆ แผนภูมินี้จึงเป็นการทดสอบการติดป้ายกำกับที่ดี เมื่อป้ายกำกับใหญ่เกินไปสำหรับแถบแท่ง ก็จะมีการย่อหรือลบออก โดยขึ้นอยู่กับขนาดของแถบ ผู้ใช้สามารถวางเมาส์เหนือแถบเพื่อดูข้อมูลเคล็ดลับเครื่องมือได้เสมอ

ไทม์ไลน์จะเรียงแถวตามลำดับ โดยประธานาธิบดีอยู่ด้านบนของรองประธานาธิบดีเหนือรัฐมนตรีว่าการกระทรวงยุติธรรมของประเทศจึงเป็นลำดับที่จะปรากฏในรหัสด้านล่าง อย่างไรก็ตาม เลย์เอาต์ของแท่งกราฟกำหนดโดยเวลาเริ่มต้นและสิ้นสุดเท่านั้น ดังนั้นการสลับเลขานุการรัฐ 2 คนหรือประธานาธิบดี 2 คนใน dataTable จึงไม่มีผลต่อแผนภูมิ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

การใส่แถบใน 1 แถว

ต่างจากพระสันตะปาปา เราจะมีประธานาธิบดีสหรัฐฯ ได้ครั้งละ 1 คนเท่านั้น ดังนั้นหากเราติดป้ายกำกับทุกแถวเป็น "ประธานาธิบดี" ไทม์ไลน์จะรวมแผนภูมิ 3 แถวแรกเข้าด้วยกันเป็นแถวเดียวเพื่อให้งานนำเสนอดูสะอาดตาขึ้น คุณควบคุมลักษณะการทำงานนี้ได้ด้วยตัวเลือก groupByRowLabel

ลักษณะการทำงานเริ่มต้นมีดังนี้

ตอนนี้ ให้ตั้งค่า groupByRowLabel เป็น false และแยก 1 แถวเป็น 3 แถว

โค้ดที่ใช้ปิดการจัดกลุ่มมีดังนี้

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

การควบคุมสี

โดยค่าเริ่มต้น Google แผนภูมิจะเลือกสีที่ปรับให้เหมาะสมกับความสวยงาม และการอ่าน (รวมถึงผู้ใช้ที่มีความบกพร่องทางสายตา) คุณปรับแต่งลักษณะการทำงานเริ่มต้นได้ด้วยตัวเลือก colorByRowLabel, singleColor, backgroundColor และ colors

ตัวเลือก colorByRowLabel จะแสดงทุกแถบในแถวเดียวกัน วิธีนี้อาจเป็นตัวเลือกที่ดีเมื่อมีช่องว่างระหว่างแถบสัญญาณ

colorByRowLabel มีค่าเริ่มต้นเป็น false เราจึงลบล้างและตั้งค่าเป็น true

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

หากต้องการให้แถบทั้งหมดมีสีเดียวกันไม่ว่าจะอยู่ในแถวใด ให้ใช้ตัวเลือก singleColor ดังนี้

ในโค้ดด้านล่าง singleColor ได้รับการตั้งค่าเป็นค่าฐาน 16 เพื่อทำให้แท่งทุกแถบเป็นสีเขียวอ่อน

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

คุณควบคุมสีพื้นหลังของแถวได้ด้วยตัวเลือก backgroundColor ดังนี้

ระบุ backgroundColor เป็นค่าฐานสิบหก ตรงนี้เราจะจับคู่กับ colorByRowLabel เพื่อแสดงแทร็กในการประชุม

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

จากนั้น หากต้องการกำหนดสีพื้นหลังเป็นแบบสลับหรือไม่สลับกันตามดัชนีแถว ให้ใช้ตัวเลือก alternatingRowStyle (v51+ ที่ใช้งานอยู่) ดังนี้

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

หากต้องการควบคุมสีของแถบแต่ละแถบ ให้ใช้ตัวเลือก colors ดังนี้

colors รับอาร์เรย์ของค่าเลขฐาน 16 ซึ่งนำไปใช้กับแท่งตามลำดับดังนี้

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

หากแผนภูมิต้องใช้สีมากกว่าที่แสดงอยู่ แผนภูมิจะทำงานเสมือนว่าตั้งค่า singleColor เป็นสีแรกในรายการ (ซึ่งเป็นเรื่องจริงสำหรับ Google Charts ทั้งหมด ไม่ใช่เฉพาะลำดับเวลา)

อีกวิธีหนึ่งในการควบคุมสีของแท่งแต่ละแท่งคือการใช้คอลัมน์ที่มีบทบาทรูปแบบ

โค้ดสำหรับเพิ่มและสร้างคอลัมน์รูปแบบ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

การเปลี่ยนแบบอักษร

คุณจะเลือกลักษณะแบบอักษรและแบบอักษรสำหรับป้ายกำกับของแต่ละแถวที่มี rowLabelStyle และเลือกป้ายกำกับในแต่ละแถบด้วย barLabelStyle ได้ ข้อมูลทั้ง 2 รายการแสดงอยู่ด้านล่าง

หมายเหตุ: โปรดเลือกแบบตัวอักษรที่เบราว์เซอร์ของผู้ใช้จะสามารถแสดงผลได้

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

ตั้งค่าสีของข้อความbarLabelไม่ได้

เส้นตารางซ้อนกัน

Google แผนภูมิจะปรับแต่งจุดสิ้นสุดของแท่งแผนภูมิเล็กๆ น้อยๆ เพื่อหลีกเลี่ยงการบดบังเส้นตารางของไทม์ไลน์ หากไม่ต้องการให้เกิดเหตุการณ์เช่นนี้ ให้ตั้งค่าตัวเลือก avoidOverlappingGridLines เป็น false

เพื่อให้เห็นภาพผลลัพธ์ เรามีตัวอย่าง 2 ตัวอย่าง ตัวอย่างแรกมีเส้นตารางซ้อนทับ และตัวอย่างที่ 2 ไม่มี

นี่คือโค้ดที่ทับซ้อนกับเส้นตาราง

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

เคล็ดลับเครื่องมือการปรับแต่ง

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

การวางเมาส์เหนือแถบจะแสดงเคล็ดลับเครื่องมือพร้อมข้อความที่ระบุไว้ในคอลัมน์ที่ 3 ในแผนภูมินี้ เราจะต้องตั้งค่าคอลัมน์ที่ 2 เป็นค่าจำลอง (ที่นี่คือ null) เพื่อให้เคล็ดลับเครื่องมือของเรามีอยู่ในคอลัมน์ที่ 3

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

กำลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ timeline: 

  google.charts.load("current", {packages: ["timeline"]});

ชื่อคลาสของการแสดงภาพคือ google.visualization.Timeline 

  var visualization = new google.visualization.Timeline(container);

รูปแบบข้อมูล

แถว: แต่ละแถวในตารางแสดงแถบไทม์ไลน์

คอลัมน์:

  คอลัมน์ 0 คอลัมน์ที่ 1 คอลัมน์ที่ 2 คอลัมน์ที่ 3 คอลัมน์ที่ 4
จุดประสงค์ในการใช้: ป้ายกำกับแถว ป้ายกํากับแท่ง (ไม่บังคับ) เคล็ดลับเครื่องมือ (ไม่บังคับ) เริ่ม สิ้นสุด
ประเภทข้อมูล: string string string ตัวเลขหรือวันที่ ตัวเลขหรือวันที่
บทบาท: ข้อมูล ข้อมูล เคล็ดลับเครื่องมือ ข้อมูล ข้อมูล

 

ตัวเลือกการกำหนดค่า

ชื่อ
alternatingRowStyle

ต้องการให้แผนภูมิสลับสีพื้นหลังตามดัชนีแถวหรือไม่ (เช่น สีพื้นหลังที่ย้อมของแถวที่จัดทำดัชนีสม่ำเสมอและใช้โทนสีที่เข้มกว่า) หากเป็นเท็จ พื้นหลังของแผนภูมิจะเป็นสีเดียวกัน หาก จริง พื้นหลังของแผนภูมิจะเปลี่ยนสีตามดัชนีแถว (หมายเหตุ: มีการใช้งาน v51+)

ประเภท: บูลีน
ค่าเริ่มต้น: true
avoidOverlappingGridLines

กำหนดว่าองค์ประกอบที่แสดง (เช่น แถบในไทม์ไลน์) ควรปิดบังเส้นตารางหรือไม่ หากเป็นเท็จ องค์ประกอบการแสดงผลอาจบดบังเส้นตารางทั้งหมด หากเป็น "จริง" ระบบอาจปรับเปลี่ยนองค์ประกอบการแสดงผลเพื่อให้มองเห็นเส้นตารางกริดได้

ประเภท: บูลีน
ค่าเริ่มต้น: true
backgroundColor

สีพื้นหลังสำหรับพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML แบบง่าย เช่น 'red' หรือ '#00cc00' หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "white"
สี

สีที่ใช้สำหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง โดยที่องค์ประกอบแต่ละรายการเป็นสตริงสี HTML เช่น colors:['red','#004411']

ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
enableInteractivity

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

ประเภท: บูลีน
ค่าเริ่มต้น: true
fontName

แบบอักษรเริ่มต้นสำหรับข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สำหรับเอลิเมนต์ของแผนภูมิที่เฉพาะเจาะจง

ประเภท: สตริง
ค่าเริ่มต้น: 'สวัสดิการ'
fontSize

ขนาดแบบอักษรเริ่มต้นเป็นพิกเซลของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สำหรับเอลิเมนต์ของแผนภูมิที่เฉพาะเจาะจง

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
forceIFrame

วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame)

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ส่วนสูง

ความสูงของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มีอยู่
timeline.barLabelStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความของป้ายกำกับแถบ ซึ่งมีรูปแบบดังนี้

{fontName: <string>, fontSize: <string>}

โปรดดู fontName และ fontSize ในตารางนี้ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
timeline.colorByRowLabel

หากตั้งค่าเป็น "จริง" ให้สีทุกแถบในแถวเดียวกัน ค่าเริ่มต้นคือใช้ 1 สีต่อป้ายกำกับแท่ง

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
timeline.groupByRowLabel

หากตั้งค่าเป็น "เท็จ" ระบบจะสร้าง 1 แถวสำหรับทุกๆ dataTable รายการ ค่าเริ่มต้นคือรวบรวมแถบที่มีป้ายกำกับแถวเดียวกันไว้ในแถวเดียว

ประเภท: บูลีน
ค่าเริ่มต้น: true
timeline.rowLabelStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความของป้ายกำกับแถว ซึ่งมีรูปแบบดังนี้

{color: <string>, fontName: <string>, fontSize: <string>}

color เป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' และดู fontName และ fontSize ในตารางนี้

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
timeline.showBarLabels

หากตั้งค่าเป็น "เท็จ" จะไม่มีป้ายกำกับแถบ ค่าเริ่มต้นคือแสดงผู้ใช้

ประเภท: บูลีน
ค่าเริ่มต้น: true
timeline.showRowLabels

หากตั้งค่าเป็น "เท็จ" จะยกเว้นป้ายกำกับแถว ค่าเริ่มต้นคือแสดงผู้ใช้

ประเภท: บูลีน
ค่าเริ่มต้น: true
timeline.singleColor

แถบสีทุกแถบจะเหมือนกัน ระบุเป็นค่าฐานสิบหก (เช่น "#8d8")

ประเภท: สตริง
ค่าเริ่มต้น: null
tooltip.isHtml

ตั้งค่าเป็น false เพื่อใช้เครื่องมือเคล็ดลับที่แสดงผล SVG (แทนการแสดงผล HTML) ดูรายละเอียดเพิ่มเติมได้ที่ การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ

หมายเหตุ: การแสดงข้อมูลผ่านภาพแผนภูมิลูกโป่งไม่รองรับการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ HTML ผ่านบทบาทข้อมูลในคอลัมน์เคล็ดลับเครื่องมือ

ประเภท: บูลีน
ค่าเริ่มต้น: true
tooltip.trigger

การโต้ตอบของผู้ใช้ที่ทำให้เคล็ดลับเครื่องมือปรากฏขึ้น

  • "โฟกัส" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ
  • "none" - เคล็ดลับเครื่องมือจะไม่ปรากฏ
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
ความกว้าง

ความกว้างของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มีอยู่

วิธีการ

วิธีการ
draw(data, options)

วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ready เริ่มทํางานแล้วเท่านั้น Extended description.

ประเภทการคืนสินค้า: ไม่มี
clearChart()

ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด

ประเภทการคืนสินค้า: ไม่มี
getSelection()

แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือแท่ง รายการคำอธิบาย และหมวดหมู่ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้เพียง 1 รายการในช่วงเวลาหนึ่งๆ Extended description

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก

กิจกรรม

ชื่อ
error

เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
onmouseover

เริ่มทำงานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีที่มีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แท่งกราฟสัมพันธ์กับเซลล์ในตารางข้อมูล รายการคำอธิบายในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นค่าว่าง)

พร็อพเพอร์ตี้: แถว คอลัมน์
onmouseout

เริ่มทำงานเมื่อผู้ใช้เลื่อนเมาส์ออกห่างจากองค์ประกอบภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แท่งกราฟสัมพันธ์กับเซลล์ในตารางข้อมูล รายการคำอธิบายในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นค่าว่าง)

พร็อพเพอร์ตี้: แถว คอลัมน์
ready

แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น

พร็อพเพอร์ตี้: ไม่มี
select

เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา getSelection()

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ