ภาพรวม
แผนภูมิคําอธิบายประกอบเป็นแผนภูมิเส้นแบบอนุกรมเวลาแบบอินเทอร์แอกทีฟที่รองรับคําอธิบายประกอบ โปรดทราบว่าตอนนี้ไทม์ไลน์ที่มีคําอธิบายประกอบจะใช้แผนภูมิคําอธิบายประกอบโดยอัตโนมัติ
การแจ้งเตือนความสับสน: ปัจจุบัน Google Annotation Chart แตกต่างจากคําอธิบายประกอบที่แผนภูมิอื่นๆ ของ Google (รวมถึงพื้นที่ บาร์ คอลัมน์ คอมโบ บรรทัด และแผนภูมิกระจาย) รองรับ ในแผนภูมิเหล่านี้ คําอธิบายประกอบจะได้รับการระบุไว้ในคอลัมน์ที่แยกข้อมูลได้ และจะแสดงเป็นข้อความสั้นๆ ซึ่งผู้ใช้วางเมาส์เหนือเพื่อดูข้อความคําอธิบายประกอบแบบเต็มได้ ในทางตรงกันข้าม แผนภูมิหมายเหตุจะแสดงคําอธิบายประกอบทั้งหมดทางด้านขวามือ ดังที่แสดงด้านล่าง
ตัวอย่าง
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type='text/javascript'> google.charts.load('current', {'packages':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "annotationchart"
google.charts.load("current", {packages: ['annotationchart']});
ชื่อคลาสของการแสดงภาพคือ google.visualization.AnnotationChart
var visualization = new google.visualization.AnnotationChart(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 ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ค่าทั้งหมด |
คําต่อท้ายที่จะเพิ่มให้กับค่าทั้งหมดในคําอธิบาย ทําเครื่องหมายในแกนแนวตั้ง ประเภท: สตริง
ค่าเริ่มต้น: ไม่มี
|
ความกว้างคําอธิบายประกอบ |
ความกว้าง (เป็นเปอร์เซ็นต์) ของพื้นที่คําอธิบายประกอบจากพื้นที่แผนภูมิทั้งหมด ต้องเป็นตัวเลขในช่วง 5-80 ประเภท: ตัวเลข
ค่าเริ่มต้น: 25
|
สี |
สีที่จะใช้สําหรับเส้นแผนภูมิและป้ายกํากับ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการเป็นสตริงในรูปแบบสี HTML ที่ถูกต้อง เช่น "red" หรือ "#00cc00" ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
|
รูปแบบวันที่ |
รูปแบบที่ใช้แสดงข้อมูลวันที่ที่มุมขวาบน รูปแบบของช่องนี้ตามที่ระบุโดยคลาส java SimpleDateFormat ประเภท: สตริง
ค่าเริ่มต้น:
วว ดด วว ปปปป หรือ HH:mm วว ปปปป ปปปป โดยขึ้นอยู่กับประเภทของคอลัมน์แรก (วันที่ หรือวันที่และเวลา ตามลําดับ)
|
คําอธิบายประกอบดิสเพลย์ |
หากตั้งค่าเป็น "เท็จ" แผนภูมิจะซ่อนตารางคําอธิบายประกอบ และคําอธิบายประกอบและคําอธิบายประกอบจะไม่แสดง (ตารางคําอธิบายประกอบจะไม่แสดงหากไม่มีข้อมูลอยู่ในข้อมูลของคุณ โดยไม่คํานึงถึงตัวเลือกนี้) เมื่อตั้งค่าตัวเลือกนี้เป็น "จริง" หลังจากคอลัมน์ตัวเลขทุกคอลัมน์ คุณสามารถเพิ่มคอลัมน์สตริงคําอธิบายประกอบได้ 2 คอลัมน์ โดยคอลัมน์หนึ่งสําหรับชื่อคําอธิบายประกอบและคอลัมน์อื่นสําหรับข้อความคําอธิบายประกอบ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
ตัวกรองคําอธิบายประกอบในเครือข่ายดิสเพลย์ |
หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงตัวควบคุมตัวกรองเพื่อกรองคําอธิบายประกอบ ใช้ตัวเลือกนี้เมื่อมีคําอธิบายประกอบหลายรายการ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ตัวคั่นวันที่แสดงผล |
จะแสดงตัวคั่นบาร์ขนาดเล็ก ( | ) ระหว่างค่าชุดกับวันที่ในคําอธิบายหรือไม่ โดยค่า "จริง" แปลว่าใช่ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
ค่าที่แน่นอนแบบดิสเพลย์ |
ไม่ว่าจะแสดงค่าขนาดที่สั้นและปัดเศษที่ด้านบนของกราฟเพื่อประหยัดพื้นที่หรือไม่ ค่า "เท็จ" บ่งบอกว่าอาจเป็นไปได้ เช่น หากตั้งค่าเป็นเท็จ 56123.45 อาจแสดงเป็น 56.12k ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
โฆษณาแบบดิสเพลย์ LegendDots |
เลือกว่าจะแสดงจุดถัดจากค่าในข้อความคําอธิบายหรือไม่ โดยที่เครื่องหมาย "ใช่" แปลว่าใช่ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
ค่า LegendValue |
ระบุว่าจะแสดงค่าที่ไฮไลต์ในคําอธิบายหรือไม่ โดยที่ค่า "จริง" แปลว่าใช่ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
ตัวเลือกการแสดงผลช่วง |
แสดงพื้นที่สําหรับเลือกช่วงการซูม (พื้นที่ที่ด้านล่างของแผนภูมิ) หรือไม่ และเท็จหรือไม่แสดงพื้นที่ที่เลือกสําหรับช่วงการซูม โครงร่างในตัวเลือกการซูมคือเวอร์ชันการปรับขนาดบันทึกของชุดแรกในแผนภูมิ โดยปรับขนาดให้พอดีกับความสูงของตัวเลือกการซูม ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
แสดงปุ่มซูม |
แสดงปุ่มซูม ("1 วัน 5 วัน 1 นาที" หรือไม่) โดย "เท็จ" หมายถึงไม่ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
เติม |
ตัวเลขตั้งแต่ 0-100 (รวม) ที่ระบุอัลฟ่าของการเติมด้านล่างของทุกกราฟในกราฟ 100 หมายถึงความทึบแสง 100% และ 0 หมายถึงไม่มีการเติมเลย สีเติมเป็นสีเดียวกับเส้นด้านบน ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ตําแหน่งในตํานาน |
จะใส่คําอธิบายสีในแถวเดียวกันด้วยปุ่มซูมและวันที่ ("sameRow") หรือในแถวใหม่ ("newRow") ประเภท: สตริง
ค่าเริ่มต้น: "sameRow"
|
สูงสุด |
ค่าสูงสุดที่จะแสดงในแกน Y หากจุดข้อมูลสูงสุดมีค่านี้ ระบบจะไม่สนใจการตั้งค่านี้และจะปรับแผนภูมิให้แสดงเครื่องหมายถูกหลักถัดไปเหนือจุดข้อมูลสูงสุด การดําเนินการนี้จะมีความสําคัญสูงกว่าแกน Y สูงสุดที่ ซึ่งคล้ายกับ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
นาที |
ค่าต่ําสุดที่จะแสดงในแกน Y หากจุดข้อมูลขั้นต่ําน้อยกว่าค่านี้ ระบบจะไม่สนใจการตั้งค่านี้ และจะมีการปรับแผนภูมิเพื่อแสดงเครื่องหมายเครื่องหมายถูกถัดไปด้านล่างจุดข้อมูลขั้นต่ํา ซึ่งจะมีความสําคัญเหนือกว่าแกนต่ําสุด Y ที่ ซึ่งคล้ายกับ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
รูปแบบตัวเลข |
ระบุรูปแบบตัวเลขที่จะใช้เพื่อจัดรูปแบบค่าที่ด้านบนของกราฟ รูปแบบควรอยู่ในรูปแบบที่ระบุโดยคลาส java DecimalFormat
หากระบุตัวเลือกนี้ ระบบจะไม่สนใจตัวเลือก ประเภท: สตริงหรือแผนที่ของจํานวน:สตริงคู่
ค่าเริ่มต้น: อัตโนมัติ
|
คอลัมน์การปรับขนาด |
ระบุค่าที่จะแสดงบนเครื่องหมายถูกที่แกน Y ในกราฟ ค่าเริ่มต้นคือมีสเกลเดี่ยวทางด้านขวาซึ่งใช้กับทั้ง 2 ชุด แต่คุณมีแต่ละด้านของกราฟที่ปรับขนาดเป็นค่าชุดที่ต่างกันได้ ตัวเลือกนี้จะใช้ค่าอาร์เรย์ 0 ถึง 3 หลักที่ระบุดัชนี (ตามเลข 0) ของชุดหนังสือเพื่อใช้เป็นค่าสเกล ตําแหน่งที่แสดงค่าเหล่านี้จะขึ้นอยู่กับจํานวนค่าที่รวมอยู่ในอาร์เรย์ของคุณ ดังนี้
เมื่อแสดงสเกลมากกว่า 1 ขนาด เราขอแนะนําให้ตั้งค่าตัวเลือก ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
จัดรูปแบบขนาด |
รูปแบบตัวเลขที่ใช้สําหรับป้ายกํากับเครื่องหมายถูก ค่าเริ่มต้นของ ประเภท: สตริง
ค่าเริ่มต้น: "#"
|
ประเภทการปรับขนาด |
กําหนดค่าสูงสุดและต่ําสุดที่แสดงในแกน Y โดยมีตัวเลือกดังต่อไปนี้
หากคุณระบุตัวเลือกขั้นต่ําและ/หรือสูงสุด ตัวเลือกเหล่านั้นจะมีความสําคัญเหนือกว่าค่าต่ําสุดและสูงสุดที่กําหนดโดยประเภทสเกลของคุณ ประเภท: สตริง
ค่าเริ่มต้น: "คงที่"
|
ตาราง |
มีตัวเลือกที่เกี่ยวข้องกับตารางคําอธิบายประกอบ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรตามออบเจ็กต์ได้ var options: { table: { sortAscending: true, sortColumn: 1 } }; ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
window.sortAscending |
หากตั้งค่าเป็น ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ตารางคอลัมน์ |
ดัชนีคอลัมน์ของตารางคําอธิบายประกอบที่จะจัดเรียงคําอธิบายประกอบ ดัชนีต้องเป็น 0 สําหรับคอลัมน์ป้ายกํากับคําอธิบายประกอบ หรือ 1 สําหรับคอลัมน์ข้อความคําอธิบายประกอบ ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ความหนา |
ตัวเลขตั้งแต่ 0-10 (รวม) ที่ระบุความหนาของเส้น โดยที่ 0 คือด้านที่บางที่สุด ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ซูมเวลาสิ้นสุด |
กําหนดวันที่สิ้นสุด/เวลาของช่วงการซูมที่เลือก ประเภท: วันที่
ค่าเริ่มต้น: ไม่มี
|
ซูมเวลาเริ่มต้น |
กําหนดวันที่เริ่มต้น/เวลาของช่วงการซูมที่เลือก ประเภท: วันที่
ค่าเริ่มต้น: ไม่มี
|
เมธอด
วิธีการ | |
---|---|
clearChart() |
ล้างแผนภูมิและเผยแพร่ทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
draw(data, options, state) |
วาดแผนภูมิ ประเภทการคืนสินค้า: ไม่มี
|
getContainer() |
เรียกแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ที่มีแผนภูมิคําอธิบายประกอบ ประเภทการแสดงผล: จัดการสําหรับองค์ประกอบ DOM
|
getSelection() |
การใช้งาน ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
getVisibleChartRange() |
แสดงผลออบเจ็กต์ที่มีพร็อพเพอร์ตี้
ประเภทการแสดงผล:
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้
start และ end
|
hideDataColumns(columnIndexes) |
ซ่อนชุดข้อมูลที่ระบุจากแผนภูมิ ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของตัวเลข ซึ่ง 0 หมายถึงชุดข้อมูลแรก และอื่นๆ ประเภทการคืนสินค้า: ไม่มี
|
setVisibleChartRange(start, end) |
ตั้งค่าช่วงที่มองเห็นได้ (ซูม) เป็นช่วงที่ระบุ ยอมรับพารามิเตอร์ 2 รายการของประเภท ประเภทการคืนสินค้า: ไม่มี
|
showDataColumns(columnIndexes) |
แสดงชุดข้อมูลที่ระบุจากแผนภูมิหลังจากที่ซ่อนโดยใช้เมธอด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
ชื่อ | |
---|---|
rangechange |
เริ่มทํางานเมื่อผู้ใช้เปลี่ยนแถบเลื่อนช่วง ปลายทางของช่วงใหม่จะพร้อมใช้งานเป็น google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } พร็อพเพอร์ตี้: เริ่มต้น สิ้นสุด
|
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการโทรหลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
select |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ