เส้นเวลา

  1. ภาพรวม
  2. ตัวอย่างง่ายๆ
  3. การติดป้ายกํากับแถบ
  4. ตัวอย่างขั้นสูง
  5. การใส่แถบในแถวเดียว
  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 คือเวลาเริ่มต้นและเวลาสิ้นสุด พารามิเตอร์เหล่านี้มีประเภท JavaScript Date แต่ก็อาจเป็นตัวเลขธรรมดาได้เช่นกัน

สุดท้าย เราจะเรียกใช้เมธอด 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 Charts ปรับแต่งได้ และในตัวอย่างต่อไปนี้ เราจะแสดงวิธีทั่วไปในการปรับแต่งรูปลักษณ์ของไทม์ไลน์

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

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

ในโค้ดนี้ เราได้แทรกคอลัมน์ใหม่ไว้ในข้อมูลของเราเพื่อให้มีป้ายกํากับของบาร์ นั่นคือชื่อและนามสกุลของประธานาธิบดีแต่ละราย เมื่อมีคอลัมน์ 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>

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

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

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

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

ไทม์ไลน์จะแสดงแถวตามลําดับ เช่น รองประธาน สําหรับรองรัฐมนตรีแทนรัฐมนตรีว่าการรัฐ เพราะเป็นลําดับที่ปรากฏอยู่ในโค้ดด้านล่าง อย่างไรก็ตาม เลย์เอาต์ของแถบจะกําหนดโดยเวลาเริ่มต้นและเวลาสิ้นสุดเท่านั้น ดังนั้นการสลับเลขานุการของรัฐ 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 คนเท่านั้น ดังนั้นหากเราติดป้ายกํากับแถวทั้งหมดเป็น "ประธานาธิบดี" ลําดับเวลาก็จะรวม 3 แถวแรกของแผนภูมิแรกไว้ในแถวเดียวเพื่อการนําเสนอที่สะอาดขึ้น คุณควบคุมพฤติกรรมนี้ได้ด้วยตัวเลือก groupByRowLabel

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

ทีนี้ลองตั้งค่า groupByRowLabel เป็น false และแยกแถวเดียวออกเป็น 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 Charts จะเลือกสีที่เพิ่มประสิทธิภาพเพื่อความสวยงามและการอ่าน (รวมถึงผู้ใช้ที่มีความบกพร่องทางสายตา) คุณจะปรับแต่งลักษณะการทํางานเริ่มต้นได้โดยใช้ตัวเลือก 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 (ใช้งานอยู่เวอร์ชัน 55+) ดังนี้

<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 จะใช้อาร์เรย์ของค่าฐานสิบหกซึ่งใช้กับแถบโดยเรียงลําดับดังนี้

<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 แผนภูมิทั้งหมด ไม่ใช่ในไทม์ไลน์เท่านั้น)

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

โค้ดสําหรับเติมและป้อนข้อมูลในคอลัมน์รูปแบบ

<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 Charts จะปรับแต่งจุดปลายทางเล็กๆ เพื่อหลีกเลี่ยงเส้นตารางของไทม์ไลน์ หากไม่ต้องการให้เกิดเหตุการณ์เช่นนี้ ให้ตั้งค่าตัวเลือก 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
จุดประสงค์ในการใช้: ป้ายกํากับแถว ป้ายกํากับแถบ (ไม่บังคับ) เคล็ดลับเครื่องมือ (ไม่บังคับ) เริ่ม สิ้นสุด
ประเภทข้อมูล: สตริง สตริง สตริง ตัวเลขหรือวันที่ ตัวเลขหรือวันที่
บทบาท: ข้อมูล ข้อมูล เคล็ดลับเครื่องมือ ข้อมูล ข้อมูล

 

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

ชื่อ
สลับรูปแบบแถว

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
หลีกเลี่ยงเส้นตารางที่ซ้อนทับกัน

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
สีพื้นหลัง

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

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

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

ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
เปิดใช้การโต้ตอบ

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
ชื่อแบบอักษร

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

ประเภท: สตริง
ค่าเริ่มต้น: "eCPM"
ขนาดแบบอักษร

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

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

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

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

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

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

ออบเจ็กต์ที่ระบุรูปแบบข้อความของป้ายกํากับในแถบ ตามที่ปรากฏในรูปแบบต่อไปนี้

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

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
ไทม์ไลน์

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ไทม์ไลน์ตามลําดับป้ายกํากับ

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
รูปแบบไทม์ไลน์ป้ายแถว

ออบเจ็กต์ที่ระบุรูปแบบข้อความของป้ายกํากับแถว ตามที่ปรากฏในรูปแบบต่อไปนี้

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

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
ไทม์ไลน์.แสดงป้ายกํากับ

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
ไทม์ไลน์.แสดงป้ายกํากับ

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

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

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

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

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

หมายเหตุ: ฟีเจอร์ลูกโป่งลูกโป่งจะไม่รองรับการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ HTML ผ่านบทบาทข้อมูลคอลัมน์เคล็ดลับเครื่องมือ

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
เคล็ดลับเครื่องมือ

การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง

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

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

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

เมธอด

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

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

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

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

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

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

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก

เหตุการณ์

ชื่อ
error

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

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

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

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

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

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

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

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

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

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

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

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