此页面由 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 用于显示标题。

此外，许多其他 Google 图表的 animation.startup 选项都不适用于采样平均值图表。如果您想使用启动动画，请在绘制图表时先将值设为 0，然后使用所需的动画值再次绘制。

正在加载

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

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

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

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

数据格式

每个数值都显示为测量标准。支持两种备选数据格式：

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

配置选项

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

方法

方法
`draw(data, options)`	绘制图表。返回值类型：无
`clearChart()`	清除该图表，并释放其分配的所有资源。返回值类型：无

事件

没有触发的事件。

数据政策

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