概览
一个带表盘的量表,使用 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
选项都不适用于采样平均值图表。如果您想使用启动动画,请在绘制图表时先将值设为 0,然后使用所需的动画值再次绘制。
正在加载
google.charts.load
软件包名称为 "gauge"
。
google.charts.load('current', {packages: ['gauge']});
可视化图表的类名称为 google.visualization.Gauge
。
var visualization = new google.visualization.Gauge(container);
数据格式
每个数值都显示为测量标准。 支持两种备选数据格式:
- 两列。 第一列应为字符串,并包含量表标签。第二列应为数字,包含刻度盘值。
- 任意数量的数字列。 每个测量仪表的标签是列的标签。
配置选项
名称 | |
---|---|
动画时长 |
动画的时长(以毫秒为单位)。如需了解详情,请参阅动画文档。 类型:数字
默认:400
|
动画缓和 |
已应用于动画的加/减速函数。提供的选项如下:
类型:字符串
默认:“线性”
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。 类型:布尔值
默认:false
|
绿色 |
用于绿色部分的颜色,采用 HTML 颜色表示法。 类型:字符串
默认:'#109618'
|
绿色 |
以绿色标记的范围的最低值。 类型:数字
默认:无
|
绿色收件人 |
以绿色标记的范围的最大值。 类型:数字
默认:无
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:容器的宽度
|
majorTicks |
主要刻度线的标签。标签数定义了所有刻度盘中主要刻度线的数量。默认设置为五个主要刻度线,带有最小值和最大值值的标签。 类型:字符串数组
默认:无
|
最大值 |
仪表的最大值。 类型:数字
默认:100
|
分钟 |
测量仪表的最小值。 类型:数字
默认:0
|
Ticks |
每个主要 tick 部分的次要 tick 部分的数量。 类型:数字
默认:2
|
红色 |
红色部分的颜色,采用 HTML 颜色表示法。 类型:字符串
默认:“#DC3912”
|
红色 |
以红色标记的范围的最低值。 类型:数字
默认:无
|
红色 |
用红色标记的范围的最高值。 类型:数字
默认:无
|
width |
图表的宽度(以像素为单位)。 类型:数字
默认:容器的宽度
|
黄色 |
黄色部分使用的颜色,采用 HTML 颜色表示法。 类型:字符串
默认:'#FF9900'
|
黄色 |
以黄色标记的范围的最低值。 类型:数字
默认:无
|
黄色 |
用黄色标记的范围的最高值。 类型:数字
默认:无
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。 返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
事件
没有触发的事件。
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。