總覽
含轉盤的計量器，透過 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);
資料格式
每個數值都會顯示為標準度量。系統支援兩種替代資料格式：
- 兩欄。 第一欄應為字串，且包含計量表標籤。 第二欄應為數字且包含度量值。
- 數值欄的任意數量。 每個度量標籤的標籤都是資料欄的標籤。
設定選項
| 名稱 | |
|---|---|
| animation.duration |
此為動畫的時間長度，以毫秒為單位。詳情請參閱動畫說明文件。 類型：數字
預設：400
|
| animation.easing |
套用至動畫的加/減速功能。可用選項如下所示：
類型：字串
預設：「線性」
|
| forceIFrame |
在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。) 類型：布林值
預設值：false
|
| greenColor |
綠色部分要使用的顏色 (採用 HTML 顏色標記法)。 類型：字串
預設：「#109618」
|
| greenFrom |
以綠色標示範圍的最低值。 類型：數字
預設：無
|
| greenTo |
以綠色標示範圍的最高值。 類型：數字
預設：無
|
| 高度 |
圖表的高度 (以像素為單位)。 類型：數字
預設：容器的寬度
|
| majorTicks |
大型刻點標記的標籤。標籤數量定義了所有計量表中主要刻點的數量。預設值為五個主要刻點，其標籤為最小和最大度量值的標籤。 類型：字串陣列
預設：無
|
| max |
標準度量的最高值。 類型：數字
預設值：100
|
| 分鐘 |
度量表的最小值。 類型：數字
預設值：0
|
| minorTicks |
每個主要刻度部分的小刻度部分的數量。 類型：數字
預設值：2
|
| redColor |
紅色部分要使用的顏色 (以 HTML 顏色標記法表示)。 類型：字串
預設： '#DC3912'
|
| redFrom |
以紅色標示範圍的最低值。 類型：數字
預設：無
|
| redTo |
以紅色標示範圍的最高值。 類型：數字
預設：無
|
| 寬度 |
圖表的寬度 (以像素為單位)。 類型：數字
預設：容器的寬度
|
| yellowColor |
黃色部分使用的顏色 (以 HTML 顏色標記法表示)。 類型：字串
預設： '#FF9900'
|
| yellowFrom |
以黃色標示範圍的最低值。 類型：數字
預設：無
|
| yellowTo |
以黃色標示範圍的最高值。 類型：數字
預設：無
|
方法
| 方法 | |
|---|---|
draw(data, options) |
繪製圖表。 傳回類型：無
|
clearChart() |
清除圖表並釋出所有分配的資源。 傳回類型：無
|
事件
沒有已觸發的事件。
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。