เส้นบอกเวลาพร้อมคำอธิบายประกอบ

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

ภาพรวม

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

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

ตัวอย่าง

<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 boolean false หากตั้งค่าเป็น "จริง" ข้อความคำอธิบายประกอบที่มีแท็ก HTML จะแสดงผลเป็น HTML
allowRedraw boolean false

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

  • AllowRedraw ต้องเป็นจริง
  • displayคำอธิบายประกอบ ต้องเป็นค่าเท็จ (กล่าวคือ คุณไม่สามารถแสดงคำอธิบายประกอบได้)
  • คุณจะต้องส่งตัวเลือกและค่าเดียวกัน (ยกเว้น AllowRedraw และ displayคำอธิบายประกอบ) เหมือนในการเรียก draw() ครั้งแรก
allValuesSuffix string ไม่มี คำต่อท้ายที่จะเพิ่มให้กับค่าทั้งหมดในสเกลและคำอธิบาย
annotationsWidth ตัวเลข 25 ความกว้าง (เป็นเปอร์เซ็นต์) ของพื้นที่คำอธิบายประกอบ จากพื้นที่ทั้งหมดของแผนภูมิ ต้องเป็นตัวเลขในช่วง 5-80
สี อาร์เรย์ของสตริง สีเริ่มต้น สีที่จะใช้กับเส้นในแผนภูมิและป้ายกำกับ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการคือสตริงในรูปแบบสี HTML ที่ถูกต้อง เช่น "สีแดง" หรือ "#00cc00"
dateFormat string "MMMM dd, yyyy" หรือ "HH:mm MMMM dd, yyyy" ทั้งนี้ขึ้นอยู่กับประเภทของคอลัมน์แรก (วันที่ หรือวันที่และเวลาตามลำดับ) รูปแบบที่ใช้แสดงข้อมูลวันที่ที่มุมขวาบน รูปแบบของช่องนี้เป็นไปตามที่ระบุโดยคลาส java SimpleDateFormat
displayAnnotations boolean false หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงคำอธิบายประกอบที่ด้านบนของค่าที่เลือก เมื่อใช้ตัวเลือกนี้เป็น "จริง" คุณจะเพิ่มคอลัมน์สตริงคำอธิบายประกอบที่ไม่บังคับได้ 2 คอลัมน์หลังคอลัมน์ตัวเลข โดยคอลัมน์หนึ่งสำหรับชื่อคำอธิบายประกอบและอีก 1 คอลัมน์สำหรับข้อความคำอธิบายประกอบ
displayAnnotationsFilter boolean false หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงตัวกรองเพื่อกรองคำอธิบายประกอบ ใช้ตัวเลือกนี้เมื่อมีคำอธิบายประกอบจำนวนมาก
displayDateBarSeparator boolean จริง เลือกว่าจะแสดงตัวคั่นแท่งขนาดเล็ก ( | ) ระหว่างค่าชุดหนังสือและวันที่ในคำอธิบายหรือไม่ โดยที่ "จริง" หมายความว่าใช่
displayExactValues boolean false เลือกว่าจะแสดงค่าแบบสั้นและกลมที่ด้านบนของกราฟเพื่อประหยัดพื้นที่หรือไม่ ค่าเท็จบ่งบอกว่าอาจแสดงค่าดังกล่าว ตัวอย่างเช่น หากตั้งค่าเป็น "เท็จ" 56123.45 อาจแสดงเป็น 56.12k
displayLegendDots boolean จริง เลือกว่าจะแสดงจุดข้างค่าในข้อความคำอธิบายหรือไม่ โดยที่ "จริง" หมายถึง "ใช่"
displayLegendValues boolean จริง เลือกว่าจะแสดงค่าที่ไฮไลต์ในคำอธิบายหรือไม่ โดยที่ "จริง" หมายถึง "ใช่"
displayRangeSelector boolean จริง

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

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

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

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

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

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

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

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

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

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

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

เมื่อแสดงมากกว่า 1 สเกล เราขอแนะนำให้ตั้งค่าตัวเลือก scaleType เป็น "allfixed" หรือ "allmaximized" อย่างใดอย่างหนึ่ง

scaleType string "แก้ไขแล้ว"

ตั้งค่าสูงสุดและค่าต่ำสุดที่แสดงบนแกน Y ซึ่งมีตัวเลือกต่อไปนี้

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

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

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

วิธีการ

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิ คุณเพิ่มเวลาตอบสนองสำหรับการเรียก draw() ครั้งที่ 2 และหลังจากนั้นได้โดยใช้พร็อพเพอร์ตี้ 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 หมายถึงชุดข้อมูลแรก และอื่นๆ

กิจกรรม

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

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

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

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

หมายเหตุ

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