ภาพรวม
แผนภูมิเส้นแบบอนุกรมเวลาแบบอินเทอร์แอกทีฟที่มีคําอธิบายประกอบซึ่งไม่บังคับ
ไทม์ไลน์ที่มีคําอธิบายประกอบจะใช้แผนภูมิคําอธิบายประกอบโดยอัตโนมัติแทน
ตัวอย่าง
<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 ขึ้นไปไปยัง
|
ค่าทั้งหมด | สตริง | ไม่มี | คําต่อท้ายที่จะเพิ่มให้กับค่าทั้งหมดในสเกลและคําอธิบาย |
ความกว้างคําอธิบายประกอบ | 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 | สตริง | "ที่ใกล้ที่สุด" | จุดไหนในชุดที่จะไฮไลต์ และค่าที่เกี่ยวข้องเพื่อแสดงในคําอธิบาย เลือกจากค่าใดค่าหนึ่งต่อไปนี้
|
ตําแหน่งในตํานาน | สตริง | "sameRow" | จะใส่คําอธิบายสีในแถวเดียวกันด้วยปุ่มซูมและวันที่ ("sameRow") หรือในแถวใหม่ ("newRow") |
สูงสุด | number | อัตโนมัติ | ค่าสูงสุดที่จะแสดงในแกน Y หากจุดข้อมูลสูงสุดมีค่านี้ ระบบจะไม่สนใจการตั้งค่านี้และจะปรับแผนภูมิเพื่อแสดงเครื่องหมายถูกหลักถัดไปที่อยู่เหนือจุดข้อมูลสูงสุด การดําเนินการนี้จะมีความสําคัญสูงกว่าแกน Y สูงสุดที่ scaleType กําหนด |
นาที | number | อัตโนมัติ | ค่าต่ําสุดที่จะแสดงในแกน Y หากจุดข้อมูลขั้นต่ําน้อยกว่าค่านี้ ระบบจะไม่สนใจการตั้งค่านี้ และจะปรับแผนภูมิเพื่อแสดงเครื่องหมายถูกหลักถัดไปด้านล่างจุดข้อมูลขั้นต่ํา ซึ่งจะมีความสําคัญเหนือกว่าแกนต่ําสุด Y ที่ scaleType กําหนด |
รูปแบบตัวเลข | สตริงหรือแผนที่ของตัวเลข:คู่สตริง | อัตโนมัติ | ระบุรูปแบบตัวเลขที่จะใช้เพื่อจัดรูปแบบค่าที่ด้านบนของกราฟ รูปแบบควรอยู่ในรูปแบบที่ระบุโดยคลาส DecimalFormat ของ java
หากระบุตัวเลือกนี้ ระบบจะไม่สนใจตัวเลือก |
คอลัมน์การปรับขนาด | อาร์เรย์ของตัวเลข | อัตโนมัติ | ระบุค่าที่จะแสดงบนเครื่องหมายถูกที่แกน Y ในกราฟ ค่าเริ่มต้นคือมีสเกลเดียวทางด้านขวาซึ่งใช้กับทั้ง 2 ชุด แต่คุณมีแต่ละด้านของกราฟที่ปรับขนาดเป็นค่าชุดที่ต่างกันได้ ตัวเลือกนี้จะใช้ค่าอาร์เรย์ 0 ถึง 3 หลักที่ระบุดัชนี (ตามเลข 0) ของชุดหนังสือเพื่อใช้เป็นค่าสเกล ตําแหน่งที่แสดงค่าเหล่านี้จะขึ้นอยู่กับจํานวนค่าที่รวมอยู่ในอาร์เรย์ของคุณ ดังนี้
เมื่อแสดงสเกลมากกว่า 1 ขนาด เราขอแนะนําให้ตั้งค่าตัวเลือก |
ประเภทการปรับขนาด | สตริง | "คงที่" | กําหนดค่าสูงสุดและต่ําสุดที่แสดงในแกน Y โดยมีตัวเลือกดังต่อไปนี้
หากคุณระบุตัวเลือกขั้นต่ําและ/หรือสูงสุด ตัวเลือกเหล่านี้จะมีความสําคัญเหนือกว่าค่าขั้นต่ําและสูงสุดที่กําหนดโดยประเภทสเกลของคุณ |
ความหนา | 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 |
|
พร้อม | แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น |
ไม่มี |
เลือก | เมื่อผู้ใช้คลิกที่แฟล็กคําอธิบายประกอบ (เครื่องหมาย) ระบบจะเลือกเซลล์ที่เกี่ยวข้องในตารางข้อมูล จากนั้นการแสดงภาพจึงทําให้เหตุการณ์นี้เริ่มทํางาน | ไม่มี |
หมายเหตุ: ระบบอาจไม่ส่งเหตุการณ์หากคุณเข้าถึงหน้าในเบราว์เซอร์เป็นไฟล์ (เช่น "file://") แทนที่จะเป็นจากเซิร์ฟเวอร์ (เช่น "http://www")
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ
หมายเหตุ
เนื่องจากการตั้งค่าความปลอดภัยของ Flash การทํางานลักษณะนี้ (และการแสดงภาพแบบ Flash ทั้งหมด) อาจทํางานไม่ถูกต้องเมื่อเข้าถึงจากตําแหน่งไฟล์ในเบราว์เซอร์ (เช่น file:///c:/webhost/myhost/myviz.html) แทนที่จะเป็น URL ของเว็บเซิร์ฟเวอร์ (เช่น http://www.myhost.com/myviz.html) ซึ่งโดยปกติแล้วจะเป็นปัญหาการทดสอบเท่านั้น คุณแก้ไขปัญหานี้ได้ตามที่อธิบายไว้ในเว็บไซต์ mediamedia