หน้านี้ได้รับการแปลโดย Cloud Translation API

การแสดงภาพ: เกจ

ภาพรวม
ตัวอย่าง
กำลังโหลด
รูปแบบข้อมูล
ตัวเลือกการกําหนดค่า
เมธอด
เหตุการณ์
นโยบายข้อมูล

ภาพรวม

มาตรวัดพร้อมหน้าปัดที่แสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML

ตัวอย่าง

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);
      }

<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
การปรับขนาดภาพเคลื่อนไหว	ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้ 'เชิงเส้น' - ความเร็วคงที่ 'in' - ค่อยๆ เข้า - เริ่มช้าและเร็วขึ้น 'out' - ค่อยๆ ออก - เริ่มต้นอย่างรวดเร็วและช้าลง 'inAndOut' - เข้าออกง่าย - เริ่มต้นช้า เพิ่มความเร็ว จากนั้นช้าลง ประเภท: สตริง ค่าเริ่มต้น: "เชิงเส้น"
ForceIFrame	วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ระบบจะละเว้นตัวเลือกนี้ แผนภูมิ IE8 ทั้งหมดจะวาดใน i-frame) ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
สีเขียว	สีที่ใช้สําหรับส่วนสีเขียวในรูปแบบสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#109618"
สีเขียวจาก	ค่าต่ําสุดของช่วงที่ทําเครื่องหมายด้วยสีเขียว ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
สีเขียวถึง	ค่าสูงสุดของช่วงโดยทําเครื่องหมายด้วยสีเขียว ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
ความสูง	ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: ความกว้างของคอนเทนเนอร์
Magic Ticks	ป้ายกํากับสําหรับเครื่องหมายถูกพื้นฐาน จํานวนป้ายกํากับจะกําหนดจํานวนเห็บหลักๆ ในหน่วยวัดทั้งหมด ค่าเริ่มต้นคือเห็ดหลัก 5 รายการ โดยป้ายกํากับของค่ามาตรวัดต่ําสุดและสูงสุด ประเภท: อาร์เรย์ของสตริง ค่าเริ่มต้น: ไม่มี
สูงสุด	ค่าสูงสุดของมาตรวัด ประเภท: ตัวเลข ค่าเริ่มต้น: 100
นาที	ค่าต่ําสุดของมาตรวัด ประเภท: ตัวเลข ค่าเริ่มต้น: 0
เครื่องหมายถูกย่อย	จํานวนส่วนเครื่องหมายถูกย่อยในเครื่องหมายถูกพื้นฐานแต่ละรายการ ประเภท: ตัวเลข ค่าเริ่มต้น: 2
สีแดง	สีที่จะใช้สําหรับส่วนสีแดงในรูปแบบสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#DC3912"
จาก	ค่าต่ําสุดสําหรับช่วงที่ทําเครื่องหมายด้วยสีแดง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
สีแดงถึง	ค่าสูงสุดของช่วงที่เป็นสีแดง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
ความกว้าง	ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: ความกว้างของคอนเทนเนอร์
สีเหลือง	สีที่จะใช้สําหรับส่วนสีเหลืองในรูปแบบสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#FF9900"
เหลืองจาก	ค่าต่ําสุดสําหรับช่วงที่ทําเครื่องหมายด้วยสีเหลือง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
เหลืองถึง	ค่าสูงสุดของช่วงโดยทําเครื่องหมายด้วยสีเหลือง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี

เมธอด

วิธีการ
`draw(data, options)`	วาดแผนภูมิ ประเภทการคืนสินค้า: ไม่มี
`clearChart()`	ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี

เหตุการณ์

ไม่มีเหตุการณ์ที่ถูกทริกเกอร์

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

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