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

可視化: ゲージ

概要
サンプル
読み込み中
データ形式
構成オプション
Methods
イベント
データポリシー

概要

ダイヤル付きのダイヤル。ブラウザ内で 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 グラフと同様に、ゲージグラフのタイトルを指定する方法はありません。上の例では、シンプルな HTML を使用してタイトルを表示します。

また、他の多くの Google グラフで使用できる animation.startup オプションは、ゲージグラフでは使用できません。起動アニメーションが必要な場合は、値をゼロに設定してグラフを描画してから、アニメーション化する値で再度描画します。

読み込み中

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
image.easing	アニメーションに適用するイージング関数。以下のオプションを使用できます。「linear」- 固定の速度。 'in' - イーズイン - ゆっくりと始めて速く。「out」- イーズアウト - 速く、ゆっくりと。「inAndOut」 - イーズインとイーズアウト - 最初はゆっくりとスピードを上げ、その後遅くします。型: string デフォルト: 「リニア」
forceIFrame	インラインフレーム内にグラフを描画します。（IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます）。型: boolean デフォルト: false
GreenColor	緑のセクションに使用する色（HTML 表記）。型: string デフォルト: '#109618'
緑	緑色で示された範囲の最小値。タイプ: 数値デフォルト: なし
緑	緑色で示された範囲の最大値。タイプ: 数値デフォルト: なし
高さ	グラフの高さ（ピクセル単位）タイプ: 数値デフォルト: コンテナの幅
メジャーティック	主要な目盛りのラベル。ラベルの数は、すべてのゲージのメジャーティックの数を定義します。デフォルトは 5 つの主要な目盛りで、ゲージの最小値と最大値のラベルが付いています。型: 文字列の配列デフォルト: なし
最高	ゲージの最大値。タイプ: 数値デフォルト: 100
分	ゲージの最小値。タイプ: 数値デフォルト: 0
マイナーティック	各メジャーティックセクションのマイナーティックセクションの数。タイプ: 数値デフォルト: 2
赤	赤色セクションに使用する色（HTML の色表記）。型: string デフォルト: '#DC3912'
赤色	赤色の範囲で示した範囲の最小値。タイプ: 数値デフォルト: なし
赤色	赤色で示された範囲の最高値。タイプ: 数値デフォルト: なし
width	グラフの幅（ピクセル単位）です。タイプ: 数値デフォルト: コンテナの幅
黄	黄色のセクションに使用する色（HTML 表記）。型: string デフォルト: '#FF9900'
黄色から	黄色で示された範囲の最小値。タイプ: 数値デフォルト: なし
黄色	黄色の範囲で示される範囲の最大値。タイプ: 数値デフォルト: なし

メソッド

メソッド
`draw(data, options)`	グラフを描画します。戻り値の型: なし
`clearChart()`	グラフをクリアし、割り当てられているすべてのリソースを解放します。戻り値の型: なし

イベント

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

データポリシー

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