このページは Cloud Translation API によって翻訳されました。

可視化: ゲージ

Overview
例
読み込んでいます
データ形式
構成オプション
メソッド
イベント
データポリシー

概要

SVG または VML を使用してブラウザ内でレンダリングされた、ダイヤル付きのゲージ。

例

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);
      }

<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	アニメーションに適用されるイージング関数。以下のオプションを使用できます。「linear」 - 一定速度。「in」- イーズイン - ゆっくりと始めてスピードアップします。「out」- イーズアウト - すばやく起動し、速度を下げます。「inAndOut」- イーズインとイーズアウト - ゆっくりとスタートし、速く、ゆっくりと。型: 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

イベント

トリガーされたイベントはありません。

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。