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

กำลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "gauge"

  google.charts.load('current', {packages: ['gauge']});

ชื่อคลาสของการแสดงภาพคือ google.visualization.Gauge

  var visualization = new google.visualization.Gauge(container);

รูปแบบข้อมูล

ค่าตัวเลขแต่ละค่าจะแสดงเป็นมาตรวัด รูปแบบข้อมูลทางเลือกมี 2 รูปแบบดังนี้

2 คอลัมน์ คอลัมน์แรกควรเป็นสตริงและมีป้ายกำกับของมาตรวัด คอลัมน์ที่ 2 ควรเป็นตัวเลขและมีค่าเกจ์
คอลัมน์ตัวเลขกี่คอลัมน์ก็ได้ ป้ายกำกับของแต่ละมาตรวัดจะเป็นป้ายกำกับของคอลัมน์

ตัวเลือกการกำหนดค่า

ชื่อ
animation.duration	ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที โปรดดูรายละเอียดในเอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข ค่าเริ่มต้น: 400
animation.easing	ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้ "เชิงเส้น" - ความเร็วคงที่ "เข้า" - ค่อยๆ เริ่ม - เริ่มต้นช้าๆ แล้วเร่งความเร็ว "out" - ค่อยๆ ออก - เริ่มต้นอย่างรวดเร็วและช้าลง 'inAndOut' - ค่อยๆ เข้าและออก - เริ่มช้าๆ เร่งความเร็ว แล้วลดความเร็ว ประเภท: สตริง ค่าเริ่มต้น: "เชิงเส้น"
forceIFrame	วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame) ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
greenColor	สีที่ใช้สำหรับส่วนสีเขียวในรูปแบบสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#109618"
greenFrom	ค่าต่ำสุดสำหรับช่วงที่ทำเครื่องหมายด้วยสีเขียว ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
greenTo	ค่าสูงสุดสำหรับช่วงที่ทำเครื่องหมายด้วยสีเขียว ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
ส่วนสูง	ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: ความกว้างของคอนเทนเนอร์
majorTicks	ป้ายกำกับสำหรับเครื่องหมายขีดยาวใหญ่ จำนวนป้ายกำกับจะกำหนดจำนวนจุดแสดงตำแหน่งหลักในมาตรวัดทั้งหมด ค่าเริ่มต้นคือ 5 จุดหลักพร้อมป้ายกำกับของค่ามาตรวัดต่ำสุดและสูงสุด ประเภท: อาร์เรย์ของสตริง ค่าเริ่มต้น: ไม่มี
สูงสุด	ค่าสูงสุดของมาตรวัด ประเภท: ตัวเลข ค่าเริ่มต้น: 100
นาที	ค่าต่ำสุดของมาตรวัด ประเภท: ตัวเลข ค่าเริ่มต้น: 0
minorTicks	จำนวนส่วนเครื่องหมายรองในส่วนเครื่องหมายถูกหลักแต่ละส่วน ประเภท:ตัวเลข ค่าเริ่มต้น: 2
redColor	สีที่ใช้สำหรับส่วนสีแดงในรูปแบบสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#DC3912"
redFrom	ค่าต่ำสุดสำหรับช่วงที่ทำเครื่องหมายด้วยสีแดง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
redTo	ค่าสูงสุดสำหรับช่วงที่ทำเครื่องหมายด้วยสีแดง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
ความกว้าง	ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: ความกว้างของคอนเทนเนอร์
yellowColor	สีที่ใช้สำหรับส่วนสีเหลืองในรูปแบบสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#FF9900"
yellowFrom	ค่าต่ำสุดสำหรับช่วงที่ทำเครื่องหมายด้วยสีเหลือง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี
yellowTo	ค่าสูงสุดสำหรับช่วงที่ทำเครื่องหมายด้วยสีเหลือง ประเภท: ตัวเลข ค่าเริ่มต้น: ไม่มี

วิธีการ

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

กิจกรรม

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

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

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