概要
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
|
イベント
トリガーされたイベントはありません。
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。