簡介
使用撥號鍵盤在瀏覽器中使用 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() |
清除圖表並釋出其分配的所有資源。 傳回類型:無
|
活動
沒有觸發的事件。
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。