可視化: ゲージ

概要

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 つのデータ形式がサポートされています。

  1. 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

イベント

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

データポリシー

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