此页面由 Cloud Translation API 翻译。

可视化：采样平均值

Overview
示例
正在加载
数据格式
配置选项
方法
事件
数据政策

概览

带有刻度盘的量表，在浏览器中使用 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 来显示标题。

此外，许多其他 Google 图表使用的 animation.startup 选项不适用于刻度盘图。如果您想添加启动动画，请先绘制图表，将值设为零，然后再使用您希望动画呈现的值再次绘制。

正在加载

google.charts.load 软件包名称为 "gauge"。

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

该可视化图表的类名称为 google.visualization.Gauge。

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

数据格式

每个数值都会显示为一个刻度盘。支持两种替代数据格式：

两列。第一列应为字符串，并且包含刻度盘标签。第二列应为数字，并包含刻度盘值。
任意数量的数值列。每个刻度盘的标签就是列的标签。

配置选项

名称
animation.duration	动画的时长（以毫秒为单位）。如需了解详情，请参阅动画文档。类型：数字默认值：400
animation.easing	应用于动画的加/减速函数。提供的选项如下： “Linear”- 恒定速度。 “in”- 缓入 - 开始时要慢，速度快。 '出' - 缓出 - 快速启动，然后放慢速度。 'inAndOut' - 缓入和缓出 - 开始时要慢，加速，然后慢。类型：字符串默认值：“线性”
forceIFrame	在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）类型：布尔值默认值：false
greenColor	要用于绿色部分的颜色，采用 HTML 颜色表示法。类型：字符串默认：“#109618”
greenFrom	标有绿色的范围的最小值。类型：数字默认：none
greenTo	以绿色标记的范围的最大值。类型：数字默认：none
高度	图表的高度（以像素为单位）。类型：数字默认：容器的宽度
majorTicks	主要刻度线的标签。标签数定义了所有刻度盘中的主刻度线数量。默认值为五个主要刻度线，带有最小和最大刻度盘值的标签。类型：字符串数组默认：none
max	刻度盘的最大值。类型：数字默认值：100
分钟	刻度盘的最小值。类型：数字默认值：0
minorTicks	每个主要刻度线部分中的次要刻度线部分的数量。类型：数字默认值：2
redColor	用于红色部分的颜色，采用 HTML 颜色表示法。类型：字符串默认：“#DC3912”
redFrom	标为红色的范围的最小值。类型：数字默认：none
redTo	标为红色的范围的最高值。类型：数字默认：none
宽度	图表的宽度（以像素为单位）。类型：数字默认：容器的宽度
yellowColor	用于黄色部分的颜色，采用 HTML 颜色表示法。类型：字符串默认：#FF9900
yellowFrom	以黄色标记的范围的最小值。类型：数字默认：none
yellowTo	以黄色标记的范围的最大值。类型：数字默认：none

方法

方法
`draw(data, options)`	绘制图表。 Return Type（返回类型）：none
`clearChart()`	清除图表，并释放为其分配的所有资源。 Return Type（返回类型）：none

事件

没有触发的事件。

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。