簡介
使用撥號鍵盤在瀏覽器中使用 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);
資料格式
每個數值都會顯示為計量器。 系統支援兩種替代資料格式：
- 兩欄。 第一欄應為字串並包含度量標籤。第二欄應為數字，並含有度量值。
- 數字欄的數目。 每個度量的標籤都是資料欄的標籤。
設定選項
| 名稱 | |
|---|---|
| 動畫.duration |
動畫的時間長度 (以毫秒為單位)。詳情請參閱動畫說明文件。 類型：數字
預設：400
|
| 動畫 |
套用至動畫的加/減速函式。可用選項如下所示：
類型：字串
預設值：「Linear」
|
| ForceIFrame |
在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會以 i-frames 繪製)。 類型：布林值
預設值：false
|
| 綠色 |
用於綠色部分的顏色 (採用 HTML 色彩標記法)。 類型：字串
預設值：「#109618」
|
| 綠色來源 |
以綠色標示的範圍為最小值。 類型：數字
預設：無
|
| 綠色至 |
以綠色標示的範圍為最高值。 類型：數字
預設：無
|
| height |
圖表的高度，以像素為單位。 類型：數字
預設：容器的寬度
|
| majorTicks |
主要刻點標示的標籤。標籤數會定義所有度量中的主要刻點數量。預設值為五大刻點，並採用最小和最大度量值的標籤。 類型：字串陣列
預設：無
|
| 最高 |
度量的最大值。 類型：數字
預設值：100
|
| 分 |
度量的最小值。 類型：數字
預設：0
|
| smallTicks |
每個主要刻點部分的次要刻點數量。 類型：數字
預設：2
|
| 紅色 |
用於紅色部分的顏色，採用 HTML 色彩標記法。 類型：字串
預設值：「#DC3912」
|
| redFrom |
以紅色顏色標示的範圍的最小值。 類型：數字
預設：無
|
| redTo |
以紅色顏色標示的範圍。 類型：數字
預設：無
|
| width |
圖表的寬度 (以像素為單位)。 類型：數字
預設：容器的寬度
|
| 黃色顏色 |
用於黃色部分的顏色 (以 HTML 顏色標記法表示)。 類型：字串
預設值：「#FF9900」
|
| 黃色來源 |
以黃色標示標示範圍的最小值。 類型：數字
預設：無
|
| YellowTo |
以黃色標示標示的範圍最高值。 類型：數字
預設：無
|
方法
| 方法 | |
|---|---|
draw(data, options) |
繪製圖表。 傳回類型：無
|
clearChart() |
清除圖表並釋出其分配的所有資源。 傳回類型：無
|
活動
沒有觸發的事件。
資料政策
系統會處理所有程式碼和資料，並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。