0

在我继续我计划做的事情之前，我想首先知道是否可以根据我想要的方式更改 Google Gauges 仪表的图像......我的意思是 api 中仪表的显示/图像应为由我的代码操纵/设置。那可能吗？我还在谷歌上搜索它，到目前为止还没有找到，所以我想在这里问。

我感谢任何帮助。谢谢你。

下面是我从 google api 网站获得的示例代码

<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”对象，它有点像电子表格。它是三行两列（第一个数组“['Label', 'Value']”定义了列的名称）。每行包含第一个仪表的标签和值（它将被标记为“Gauge1”，并且将从值 80 开始），下一行是第二个仪表的标签和值，等等。

如果您想更改仪表的值，则需要更改“数据”对象中的数字（使用 .setValue(row, column, value)，然后告诉仪表重绘。例如，

data.setValue(0, 1, 30);

这会将第 0 行、第 1 列设置为 30。第 0 行对应于第一个仪表。Column-1 对应于它的值（我们不想更新它的标签......那将是 column-0）。因此，要更新所有三个仪表的值，我们将使用如下内容：

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 回答