0

私がやろうとしていることに進む前に、私が望むものに応じてゲージのGoogle Gauges画像を変更できるかどうかを最初に知りたいです...つまり、APIのゲージの表示/画像は私のコードによって操作/設定されています。それは可能ですか？私はまだそれについてグーグルで調べていますが、今のところ何も見つからなかったので、ここで質問することを考えました.

助けていただければ幸いです。ありがとうございました。

以下は、Google API Webサイトから取得したサンプルコードです

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.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);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>
4

1 に答える 1

0

ゲージの値 (つまり、針が指している場所) を動的に変更しようとしているように聞こえますが、それはまさにゲージができることです。

まず、必要なゲージの数を決定する必要があります。ゲージに供給するデータのテーブルを作成するときに、それらを定義します。

var data = google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['Gauge1', 80],
   ['#2', 55],
   ['Third One', 68]
]);

これにより、スプレッドシートに少し似た「DataTable」オブジェクトが作成されることに注意してください。これは 3 つの行と 2 つの列です (最初の配列 "['Label', 'Value']" は列の名前を定義します)。各行には最初のゲージのラベルと値が含まれ (「Gauge1」というラベルが付けられ、80 の値で開始されます)、次の行は 2 番目のゲージのラベルと値などです。

ゲージの値を変更したい場合は、「データ」オブジェクトの数値を (.setValue(row, column, value) で) 変更し、ゲージに再描画するように指示する必要があります。たとえば、

data.setValue(0, 1, 30);

これにより、row-0、column-1 が 30 に設定されます。Row-0 は最初のゲージに対応します。列 1 はその値に対応します (ラベルを更新したくありません...列 0 になります)。したがって、3 つのゲージすべての値を更新するには、次のようなものを使用します。

data.setValue(0, 1, 30); // Set "Gauge1" to 30
data.setValue(1, 1, 45); // Set "#2" to 45
data.setValue(2, 1, 12); // Set "Third One" to 12
chart.draw(data, options);

私は常にデータオブジェクトをグローバルにしてから、値を変更するだけですが、毎回 arrayToDataTable() を使用してデータオブジェクトを完全に再生成できると思います。

于 2013-05-06T19:32:01.003 に答える