ภาพรวม
มาตรวัดพร้อมหน้าปัดที่แสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML
ตัวอย่าง
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 120px;"></div> </body> </html>
ขณะนี้ยังไม่มีวิธีระบุชื่อแผนภูมิแผนภูมิ อย่างที่คุณทําได้ใน Google แผนภูมิอื่นๆ ในตัวอย่างข้างต้น HTML แบบง่ายจะใช้เพื่อแสดงชื่อ
นอกจากนี้ ตัวเลือก animation.startup
ที่ใช้ได้กับ Google Charts จํานวนมากก็ไม่พร้อมใช้งานสําหรับแผนภูมิเกจ หากต้องการสร้างภาพเคลื่อนไหวของจุดเริ่มต้น ให้วาดแผนภูมิในเบื้องต้นด้วยค่าที่ตั้งค่าเป็น 0 แล้ววาดอีกครั้งด้วยค่าที่คุณต้องการให้เคลื่อนไหว
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "gauge"
google.charts.load('current', {packages: ['gauge']});
ชื่อคลาสของการแสดงภาพคือ google.visualization.Gauge
var visualization = new google.visualization.Gauge(container);
รูปแบบข้อมูล
ค่าตัวเลขแต่ละค่าจะแสดงเป็นมาตรวัด ระบบรองรับข้อมูล 2 รูปแบบ ดังนี้
- 2 คอลัมน์ คอลัมน์แรกควรเป็นสตริงและมีป้ายกํากับมาตรวัด คอลัมน์ที่ 2 ควรเป็นตัวเลขและมีค่าการวัด
- คอลัมน์ตัวเลขจํานวนเท่าใดก็ได้ ป้ายกํากับของการวัดแต่ละรายการคือป้ายกํากับของคอลัมน์
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
ภาพเคลื่อนไหว.ระยะเวลา |
ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ดูรายละเอียดได้ที่เอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข
ค่าเริ่มต้น: 400
|
การปรับขนาดภาพเคลื่อนไหว |
ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
|
ForceIFrame |
วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ระบบจะละเว้นตัวเลือกนี้ แผนภูมิ IE8 ทั้งหมดจะวาดใน i-frame) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
สีเขียว |
สีที่ใช้สําหรับส่วนสีเขียวในรูปแบบสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "#109618"
|
สีเขียวจาก |
ค่าต่ําสุดของช่วงที่ทําเครื่องหมายด้วยสีเขียว ประเภท: ตัวเลข
ค่าเริ่มต้น: ไม่มี
|
สีเขียวถึง |
ค่าสูงสุดของช่วงโดยทําเครื่องหมายด้วยสีเขียว ประเภท: ตัวเลข
ค่าเริ่มต้น: ไม่มี
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างของคอนเทนเนอร์
|
Magic Ticks |
ป้ายกํากับสําหรับเครื่องหมายถูกพื้นฐาน จํานวนป้ายกํากับจะกําหนดจํานวนเห็บหลักๆ ในหน่วยวัดทั้งหมด ค่าเริ่มต้นคือเห็ดหลัก 5 รายการ โดยป้ายกํากับของค่ามาตรวัดต่ําสุดและสูงสุด ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: ไม่มี
|
สูงสุด |
ค่าสูงสุดของมาตรวัด ประเภท: ตัวเลข
ค่าเริ่มต้น: 100
|
นาที |
ค่าต่ําสุดของมาตรวัด ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
เครื่องหมายถูกย่อย |
จํานวนส่วนเครื่องหมายถูกย่อยในเครื่องหมายถูกพื้นฐานแต่ละรายการ ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
|
สีแดง |
สีที่จะใช้สําหรับส่วนสีแดงในรูปแบบสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "#DC3912"
|
จาก |
ค่าต่ําสุดสําหรับช่วงที่ทําเครื่องหมายด้วยสีแดง ประเภท: ตัวเลข
ค่าเริ่มต้น: ไม่มี
|
สีแดงถึง |
ค่าสูงสุดของช่วงที่เป็นสีแดง ประเภท: ตัวเลข
ค่าเริ่มต้น: ไม่มี
|
ความกว้าง |
ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างของคอนเทนเนอร์
|
สีเหลือง |
สีที่จะใช้สําหรับส่วนสีเหลืองในรูปแบบสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "#FF9900"
|
เหลืองจาก |
ค่าต่ําสุดสําหรับช่วงที่ทําเครื่องหมายด้วยสีเหลือง ประเภท: ตัวเลข
ค่าเริ่มต้น: ไม่มี
|
เหลืองถึง |
ค่าสูงสุดของช่วงโดยทําเครื่องหมายด้วยสีเหลือง ประเภท: ตัวเลข
ค่าเริ่มต้น: ไม่มี
|
เมธอด
วิธีการ | |
---|---|
draw(data, options) |
วาดแผนภูมิ ประเภทการคืนสินค้า: ไม่มี
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
ไม่มีเหตุการณ์ที่ถูกทริกเกอร์
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ