可视化：采样平均值

  1. Overview
  2. 示例
  3. 正在加载
  4. 数据格式
  5. 配置选项
  6. 方法
  7. 事件
  8. 数据政策

概览

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

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

正在加载

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

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

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

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

数据格式

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

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

配置选项

名称
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

事件

没有触发的事件。

数据政策

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