概要
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 Chart のようにゲージグラフのタイトルを指定する方法はありません。上の例では、シンプルな 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);
データ形式
各数値はゲージとして表示されます。次の 2 つのデータ形式がサポートされています。
- 2 つの列。最初の列は文字列で、ゲージのラベルが含まれている必要があります。2 番目の列は数値で、ゲージ値が含まれている必要があります。
- 任意の数の数値列。各ゲージのラベルは列のラベルです。
構成オプション
| 名前 | |
|---|---|
| animation.duration |
アニメーションの再生時間（ミリ秒単位）。詳細については、アニメーションのドキュメントをご覧ください。 タイプ: 数値
デフォルト: 400
|
| animation.easing |
アニメーションに適用されるイージング関数。以下のオプションを使用できます。
型: string
デフォルト: 「linear」
|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。 型: boolean
デフォルト: false
|
| greenColor |
緑のセクションに使用する色（HTML のカラー表記）。 型: string
デフォルト: 「#109618」
|
| greenFrom |
緑色でマークされた範囲の最小値。 タイプ: 数値
デフォルト: なし
|
| greenTo |
緑色でマークされた範囲の最大値。 タイプ: 数値
デフォルト: なし
|
| 身長 |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: コンテナの幅
|
| majorTicks |
主要な目盛りのラベル。ラベルの数は、すべてのゲージの主目盛りの数を定義します。デフォルトは 5 つの主要な目盛りで、最小と最大のゲージ値のラベルがあります。 型: 文字列の配列
デフォルト: なし
|
| max |
ゲージの最大値。 タイプ: 数値
デフォルト: 100
|
| 分 |
ゲージの最小値。 タイプ: 数値
デフォルト: 0
|
| minorTicks |
各主要目盛り部分の小目盛り部分の数。 タイプ:数値
デフォルト: 2
|
| redColor |
赤のセクションに使用する色（HTML のカラー表記）。 型: string
デフォルト: 「#DC3912」
|
| redFrom |
赤色でマークされた範囲の最小値。 タイプ: 数値
デフォルト: なし
|
| redTo |
赤色でマークされた範囲の最大値。 タイプ: 数値
デフォルト: なし
|
| 幅 |
グラフの幅（ピクセル単位）。 タイプ: 数値
デフォルト: コンテナの幅
|
| yellowColor |
黄色のセクションに使用する色（HTML カラー表記）。 型: string
デフォルト: 「#FF9900」
|
| yellowFrom |
黄色でマークされた範囲の最小値。 タイプ: 数値
デフォルト: なし
|
| yellowTo |
黄色でマークされた範囲の最大値。 タイプ: 数値
デフォルト: なし
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。 戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
トリガーされたイベントはありません。
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。