ไทม์ไลน์ที่มีคําอธิบายประกอบ

  1. ภาพรวม
  2. ตัวอย่าง
  3. กำลังโหลด
  4. รูปแบบข้อมูล
  5. ตัวเลือกการกําหนดค่า
  6. เมธอด
  7. เหตุการณ์
  8. นโยบายข้อมูล
  9. หมายเหตุ

ภาพรวม

แผนภูมิเส้นแบบอนุกรมเวลาแบบอินเทอร์แอกทีฟที่มีคําอธิบายประกอบซึ่งไม่บังคับ

ไทม์ไลน์ที่มีคําอธิบายประกอบจะใช้แผนภูมิคําอธิบายประกอบโดยอัตโนมัติแทน

ตัวอย่าง

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

สําคัญ: หากต้องการใช้การแสดงภาพนี้ คุณต้องระบุความสูงและความกว้างขององค์ประกอบคอนเทนเนอร์อย่างชัดเจนในหน้าเว็บ เช่น <div id="chart_div" style="width:400; height:250"></div>

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "annotatedtimeline"

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

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

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

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

คุณแสดงเส้นในแผนภูมิได้อย่างน้อย 1 เส้น แต่ละแถวแสดงแทนตําแหน่ง X ในแผนภูมิ กล่าวคือ เวลาที่ระบุ ซึ่งแต่ละบรรทัดอธิบายด้วยชุดคอลัมน์ 1-3 คอลัมน์

  • คอลัมน์แรกเป็นประเภท date หรือ datetime และระบุค่า X ของจุดในแผนภูมิ หากคอลัมน์นี้เป็นประเภท date (ไม่ใช่ datetime) ความละเอียดที่เล็กที่สุดในแกน X จะเป็น 1 วัน
  • จากนั้นแต่ละแถวของข้อมูลจะอธิบายโดยชุดคอลัมน์เพิ่มเติม 1-3 คอลัมน์ตามที่อธิบายไว้ที่นี่
    • ค่า Y - [จําเป็น ตัวเลข] คอลัมน์แรกในแต่ละชุดจะอธิบายค่าของบรรทัด ณ เวลาที่เกี่ยวข้องจากคอลัมน์แรก ป้ายกํากับคอลัมน์จะแสดงอยู่ในแผนภูมิเป็นชื่อของบรรทัดนั้น
    • ชื่อหมายเหตุ - [ไม่บังคับ, สตริง] หากคอลัมน์สตริงอยู่หลังคอลัมน์ค่าและตัวเลือก displayAnnotations เป็นจริง คอลัมน์นี้จะมีชื่อย่อที่อธิบายจุดนี้ ตัวอย่างเช่น หากเส้นนี้แสดงถึงอุณหภูมิในบราซิลและตัวเลขนี้เป็นตัวเลขที่สูงมาก ชื่ออาจเป็น "วันที่ร้อนที่สุดในระเบียน"
    • ข้อความหมายเหตุ - [สตริงที่ไม่บังคับ] หากมีคอลัมน์สตริงที่ 2 สําหรับชุดนี้ ระบบจะใช้ค่าเซลล์เป็นข้อความอธิบายเพิ่มเติมสําหรับจุดนี้ คุณต้องตั้งตัวเลือก displayAnnotations เป็น "จริง" จึงจะใช้คอลัมน์นี้ได้ คุณใช้แท็ก HTML ได้ หากตั้งค่า allowHtml เป็น true ซึ่งหมายความว่าไม่มีขีดจํากัดขนาด โปรดทราบว่ารายการที่ยาวเกินไปอาจล้นส่วนการแสดงผล คุณไม่จําเป็นต้องใช้คอลัมน์นี้แม้ว่าจะมีคอลัมน์ชื่อคําอธิบายประกอบสําหรับจุดนี้ก็ตาม แผนภูมิไม่ใช้ป้ายกํากับคอลัมน์ เช่น หากนี่เป็นวันที่อากาศร้อนที่สุดในจุดบันทึกเสียง ให้พูดประมาณว่า "วันถัดไปที่ใกล้ที่สุดอากาศเย็นกว่า 10 องศา"

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
AllowHtml บูลีน เท็จ หากตั้งค่าเป็น "จริง" ข้อความคําอธิบายประกอบที่มีแท็ก HTML จะแสดงผลเป็น HTML
AllowReDraw บูลีน เท็จ

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

  • AllowReDraw ต้องเป็นจริง
  • หมายเหตุที่แสดงต้องเป็นเท็จ (กล่าวคือ คุณไม่สามารถแสดงคําอธิบายประกอบได้)
  • คุณต้องส่งตัวเลือกและตัวเลือกเป็นค่าเดียวกัน (ยกเว้น allowReDraw และคําอธิบายประกอบแบบดิสเพลย์) เหมือนกับในการเรียก draw() ครั้งแรก
ค่าทั้งหมด สตริง ไม่มี คําต่อท้ายที่จะเพิ่มให้กับค่าทั้งหมดในสเกลและคําอธิบาย
ความกว้างคําอธิบายประกอบ number 25 ความกว้าง (เป็นเปอร์เซ็นต์) ของพื้นที่คําอธิบายประกอบจากพื้นที่แผนภูมิทั้งหมด ต้องเป็นตัวเลขในช่วง 5-80
สี อาร์เรย์ของสตริง สีเริ่มต้น สีที่จะใช้สําหรับเส้นแผนภูมิและป้ายกํากับ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการเป็นสตริงในรูปแบบสี HTML ที่ถูกต้อง เช่น "red" หรือ "#00cc00"
รูปแบบวันที่ สตริง "dd MMMM dd, yyyy" หรือ "HH:mm MMMM dd, yyyy" ขึ้นอยู่กับประเภทของคอลัมน์แรก (วันที่หรือวันที่และเวลาตามลําดับ) รูปแบบที่ใช้แสดงข้อมูลวันที่ที่มุมขวาบน รูปแบบของช่องนี้เป็นไปตามคลาส SimpleDateFormat ของ Java
คําอธิบายประกอบดิสเพลย์ บูลีน เท็จ หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงคําอธิบายประกอบที่ด้านบนของค่าที่เลือก เมื่อตั้งค่าตัวเลือกนี้เป็น "จริง" หลังจากคอลัมน์ตัวเลขทุกคอลัมน์ คุณสามารถเพิ่มคอลัมน์สตริงคําอธิบายประกอบได้ 2 คอลัมน์ โดยคอลัมน์หนึ่งสําหรับชื่อคําอธิบายประกอบและคอลัมน์อื่นสําหรับข้อความคําอธิบายประกอบ
ตัวกรองคําอธิบายประกอบในเครือข่ายดิสเพลย์ บูลีน เท็จ หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงตัวกรองตัวกรองเพื่อกรองคําอธิบายประกอบ ใช้ตัวเลือกนี้เมื่อมีคําอธิบายประกอบหลายรายการ
ตัวคั่นวันที่แสดงผล บูลีน จริง จะแสดงตัวคั่นแถบเล็ก ( | ) ระหว่างค่าชุดกับวันที่ในคําอธิบายหรือไม่ โดยค่า "จริง" แปลว่าใช่
ค่าที่แน่นอนแบบดิสเพลย์ บูลีน เท็จ ไม่ว่าจะแสดงค่าขนาดที่สั้นและกระชับที่ด้านบนของกราฟเพื่อประหยัดพื้นที่หรือไม่ ค่า "เท็จ" บ่งบอกว่าอาจเป็นไปได้ เช่น หากตั้งค่าเป็น "เท็จ" ค่า 56123.45 อาจแสดงเป็น 56.12k
โฆษณาแบบดิสเพลย์ LegendDots บูลีน จริง เลือกว่าจะแสดงจุดถัดจากค่าในข้อความคําอธิบายหรือไม่ โดยที่คําว่า "ใช่" แปลว่า "ใช่"
ค่า LegendValue บูลีน จริง เลือกว่าจะแสดงค่าที่ไฮไลต์ในคําอธิบายหรือไม่ โดยที่ "จริง" แปลว่าใช่
ตัวเลือกการแสดงผลช่วง บูลีน จริง

กําหนดว่าจะแสดงพื้นที่การเลือกช่วงการซูม (พื้นที่ที่ด้านล่างของแผนภูมิ) หรือไม่ และเท็จหรือไม่หมายถึงพื้นที่ที่เลือก

โครงร่างในตัวเลือกการซูมคือเวอร์ชันการปรับขนาดบันทึกของชุดล่าสุดในแผนภูมิ ซึ่งปรับขนาดให้พอดีกับความสูงของตัวเลือกการซูม
แสดงปุ่มซูม บูลีน จริง แสดงลิงก์ซูม ("1 วัน 5 วัน 1 นาที" หรือไม่) โดยที่ "เท็จ" หมายถึงไม่
เติม number 0 ตัวเลขตั้งแต่ 0-100 (รวม) ซึ่งระบุอัลฟ่าของการเติมด้านล่างของทุกบรรทัดในกราฟเส้น 100 หมายถึงการทึบแสง 100%, 0 หมายความว่าคุณไม่มีการเติมสีเลย สีเติมเป็นสีเดียวกับเส้นด้านบน
ไฮไลต์ Dot สตริง "ที่ใกล้ที่สุด"

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

  • "ที่ใกล้ที่สุด" - ค่าที่ใกล้เคียงที่สุดในแกน X ของเมาส์
  • "last" - ชุดค่าถัดไปทางด้านซ้ายของเมาส์
ตําแหน่งในตํานาน สตริง "sameRow" จะใส่คําอธิบายสีในแถวเดียวกันด้วยปุ่มซูมและวันที่ ("sameRow") หรือในแถวใหม่ ("newRow")
สูงสุด number อัตโนมัติ ค่าสูงสุดที่จะแสดงในแกน Y หากจุดข้อมูลสูงสุดมีค่านี้ ระบบจะไม่สนใจการตั้งค่านี้และจะปรับแผนภูมิเพื่อแสดงเครื่องหมายถูกหลักถัดไปที่อยู่เหนือจุดข้อมูลสูงสุด การดําเนินการนี้จะมีความสําคัญสูงกว่าแกน Y สูงสุดที่ scaleType กําหนด
นาที number อัตโนมัติ ค่าต่ําสุดที่จะแสดงในแกน Y หากจุดข้อมูลขั้นต่ําน้อยกว่าค่านี้ ระบบจะไม่สนใจการตั้งค่านี้ และจะปรับแผนภูมิเพื่อแสดงเครื่องหมายถูกหลักถัดไปด้านล่างจุดข้อมูลขั้นต่ํา ซึ่งจะมีความสําคัญเหนือกว่าแกนต่ําสุด Y ที่ scaleType กําหนด
รูปแบบตัวเลข สตริงหรือแผนที่ของตัวเลข:คู่สตริง อัตโนมัติ

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

รูปแบบควรอยู่ในรูปแบบที่ระบุโดยคลาส DecimalFormat ของ java

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

หากระบุตัวเลือกนี้ ระบบจะไม่สนใจตัวเลือก displayExactValues
คอลัมน์การปรับขนาด อาร์เรย์ของตัวเลข อัตโนมัติ

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

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

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

เมื่อแสดงสเกลมากกว่า 1 ขนาด เราขอแนะนําให้ตั้งค่าตัวเลือก scaleType เป็น "ทั้งหมด" หรือ "ขยายใหญ่สุด"

ประเภทการปรับขนาด สตริง "คงที่"

กําหนดค่าสูงสุดและต่ําสุดที่แสดงในแกน Y โดยมีตัวเลือกดังต่อไปนี้

  • "maximized" - แกน Y จะครอบคลุมค่าต่ําสุดไปยังค่าสูงสุดของชุดหนังสือ หากคุณมีชุดหนังสือมากกว่า 1 ชุด ให้ใช้แบบเพิ่มจํานวนคลิกสูงสุด
  • "คงที่" [ค่าเริ่มต้น] - แกน Y จะแตกต่างกันไป โดยขึ้นอยู่กับค่าของข้อมูล:
    • หากค่าทั้งหมดเป็น >=0 แกน Y จะอยู่ระหว่าง 0 ถึงค่าข้อมูลสูงสุด
    • หากค่าทั้งหมดเป็น <=0 แกน Y จะอยู่ระหว่าง 0 ถึงค่าข้อมูลขั้นต่ํา
    • หากค่าเป็นบวกและลบ แกน Y จะมีช่วงจากค่าสูงสุดในชุดไปจนถึงค่าต่ําสุดของชุด

      สําหรับหนังสือหลายชุด ให้ใช้ "แก้ไขแล้ว"
  • "allmaximize" - เหมือนกับ "ขยายใหญ่สุด" แต่ใช้เมื่อแสดงหลายขนาด แผนภูมิทั้ง 2 รายการจะเพิ่มประสิทธิภาพภายในสเกลเดียวกัน ซึ่งหมายความว่าระบบจะตีความแผนภูมิหนึ่งผิดไปจากแกน Y แต่การวางเมาส์เหนือแผนภูมิแต่ละชุดจะแสดงค่าจริง
  • "allfixed" - "เหมือนกับ" คงที่" แต่ใช้เมื่อแสดงหลายขนาด การตั้งค่านี้จะปรับการปรับขนาดแต่ละรายการให้กับชุดหนังสือที่ใช้ (ใช้ร่วมกับ scaleColumns)

หากคุณระบุตัวเลือกขั้นต่ําและ/หรือสูงสุด ตัวเลือกเหล่านี้จะมีความสําคัญเหนือกว่าค่าขั้นต่ําและสูงสุดที่กําหนดโดยประเภทสเกลของคุณ
ความหนา number 0 ตัวเลขตั้งแต่ 0-10 (รวม) ที่ระบุความหนาของเส้น โดยที่ 0 คือด้านที่บางที่สุด
Wmode สตริง "หน้าต่าง" พารามิเตอร์โหมดหน้าต่าง (wmode) สําหรับแผนภูมิ Flash ค่าที่ใช้ได้คือ "opaque", "window" หรือ "transparency"
ซูมเวลาสิ้นสุด วันที่ ไม่มี กําหนดวันที่สิ้นสุด/เวลาของช่วงการซูมที่เลือก
ซูมเวลาเริ่มต้น วันที่ ไม่มี กําหนดวันที่เริ่มต้น/เวลาของช่วงการซูมที่เลือก

เมธอด

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิ คุณเร่งเวลาในการตอบกลับสําหรับการเรียกใช้ครั้งที่ 2 ขึ้นไปไปยัง draw() ได้โดยใช้พร็อพเพอร์ตี้ AllowReDraw
getSelection() อาร์เรย์ขององค์ประกอบการเลือก การใช้งาน getSelection() มาตรฐาน องค์ประกอบที่เลือกคือองค์ประกอบเซลล์ เลือกผู้ใช้ได้เพียง 1 เซลล์ต่อครั้งเท่านั้น
getVisibleChartRange() ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ start และ end แสดงผลออบเจ็กต์ที่มีพร็อพเพอร์ตี้ start และ end ซึ่งแต่ละรายการเป็นออบเจ็กต์ Date ที่แสดงถึงการเลือกเวลาปัจจุบัน
hideDataColumns(columnIndexes) ไม่มี ซ่อนชุดข้อมูลที่ระบุจากแผนภูมิ ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของตัวเลขก็ได้ โดย 0 จะหมายถึงชุดข้อมูลแรก และอื่นๆ
setVisibleChartRange(start, end) ไม่มี ตั้งค่าช่วงที่มองเห็นได้ (ซูม) เป็นช่วงที่ระบุ ยอมรับพารามิเตอร์ 2 ประเภทประเภท Date ที่แสดงถึงครั้งแรกและครั้งสุดท้ายของช่วงที่มองเห็นได้ที่ต้องการ ตั้งค่า start เป็น null เพื่อรวมทุกอย่างตั้งแต่วันที่แรกสุดเป็น end ตั้งค่า end เป็น Null เพื่อรวมทุกอย่างตั้งแต่ start ถึงวันสุดท้าย
showDataColumns(columnIndexes) ไม่มี แสดงชุดข้อมูลที่ระบุจากแผนภูมิหลังจากที่ซ่อนโดยใช้เมธอด hideDataColumns ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของตัวเลขก็ได้ โดย 0 จะหมายถึงชุดข้อมูลแรก และอื่นๆ

เหตุการณ์

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
ช่วงการเปลี่ยนแปลง เปลี่ยนช่วงการซูมแล้ว เริ่มทํางานหลังจากผู้ใช้แก้ไขช่วงเวลาที่มองเห็นได้ แต่ไม่ใช่หลังจากเรียกเมธอด setVisibleChartRange
หมายเหตุ: ขอแนะนําให้ไม่ใช้พร็อพเพอร์ตี้เหตุการณ์ แต่ให้เรียกใช้โดยเรียกใช้เมธอด getVisibleChartRange
  • start: วันที่ เวลาเริ่มต้นของช่วงการซูม
  • end: วันที่ เวลาสิ้นสุดของช่วงการซูม
พร้อม แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น ไม่มี
เลือก เมื่อผู้ใช้คลิกที่แฟล็กคําอธิบายประกอบ (เครื่องหมาย) ระบบจะเลือกเซลล์ที่เกี่ยวข้องในตารางข้อมูล จากนั้นการแสดงภาพจึงทําให้เหตุการณ์นี้เริ่มทํางาน ไม่มี

หมายเหตุ: ระบบอาจไม่ส่งเหตุการณ์หากคุณเข้าถึงหน้าในเบราว์เซอร์เป็นไฟล์ (เช่น "file://") แทนที่จะเป็นจากเซิร์ฟเวอร์ (เช่น "http://www")

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

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

หมายเหตุ

เนื่องจากการตั้งค่าความปลอดภัยของ Flash การทํางานลักษณะนี้ (และการแสดงภาพแบบ Flash ทั้งหมด) อาจทํางานไม่ถูกต้องเมื่อเข้าถึงจากตําแหน่งไฟล์ในเบราว์เซอร์ (เช่น file:///c:/webhost/myhost/myviz.html) แทนที่จะเป็น URL ของเว็บเซิร์ฟเวอร์ (เช่น http://www.myhost.com/myviz.html) ซึ่งโดยปกติแล้วจะเป็นปัญหาการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ mediamedia