Question

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

我感谢任何帮助。谢谢。

下面是我从谷歌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>

Answer 1

听起来你正试图动态改变仪表的值（即针指向的位置），而这正是仪表能够做到的。

首先，您需要确定所需的量规。您在制作供给仪表的数据表时定义它们：

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

重要的是要意识到这会产生一个“DataTable”对象，它有点像电子表格。它是三行两列（第一个数组“['Label'，'Value']”定义列的名称）。每行包含第一个标尺的标签和值（它将标记为“Gauge1”，它将以值80开始），下一行是第二个标尺的标签和值，等等。 / p>

如果您想更改仪表的值，您需要更改“数据”对象中的数字（使用.setValue（行，列，值）然后告诉仪表重绘。例如，

data.setValue（0,1,30）;

这会将row-0，column-1设置为30. Row-0对应于第一个gauge。 Column-1对应于它的值（我们不想更新它的标签......它将是-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（）。

关注Google API Gauge

1 个答案: