如何：动态移动 Google Gauge？答案

【问题标题】：How to: Dynamically move Google Gauge?如何：动态移动 Google Gauge？
【发布时间】：2011-03-29 22:39:52
【问题描述】：

Watch the CPU and memory gauges 一秒钟。它们动态移动。

下面显示的示例代码不会像那样移动仪表（或者至少在我自己的项目中尝试过时）。

如何让它像那样动态移动？

（另外，这些指标会减慢我的网站连接到 Google 的速度吗？另一方面，它会提升我的排名吗？）

【问题讨论】：

这与 AppEngine 有什么关系？
@Adam Crossland：抱歉不确定.....google代码的正确标签是什么？

标签： javascript asp.net html xml

【解决方案1】：

示例代码和实际演示不同。试试这个：

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
    <script type="text/javascript">
  function Timer(){this.t={};this.tick=function(a,b){this.t[a]=[(new Date).getTime(),b]};this.tick("start")}var loadTimer=new Timer;window.jstiming={Timer:Timer,load:loadTimer};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;if(window.jstiming)window.jstiming.report=function(g,d){var c="";if(window.jstiming.pt){c+="&srt="+window.jstiming.pt;delete window.jstiming.pt}if(window.external&&window.external.tran)c+="&tran="+window.external.tran;var a=g.t,h=a.start;delete a.start;var i=[],e=[];for(var b in a){if(b.indexOf("_")==0)continue;var f=a[b][1];if(f)a[f][0]&&e.push(b+"."+(a[b][0]-a[f][0]));else h&&i.push(b+"."+(a[b][0]-h[0]))}if(d)for(var j in d)c+="&"+j+"="+d[j];(new Image).src=["http://csi.gstatic.com/csi?v=3","&s=gviz&action=",g.name,e.length?"&it="+e.join(",")+c:c,"&rt=",i.join(",")].join("")};
</script>

<script type="text/javascript">

var csi_timer = new window.jstiming.Timer();
csi_timer.name = 'docs_gauge';

google.setOnLoadCallback(drawChart);

function drawChart() {

  csi_timer.tick('load');

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(3);
  data.setValue(0, 0, 'Memory');
  data.setValue(0, 1, 80);
  data.setValue(1, 0, 'CPU');
  data.setValue(1, 1, 55);
  data.setValue(2, 0, 'Network');
  data.setValue(2, 1, 68);

  csi_timer.tick('data');

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

  csi_timer.tick('new');

  var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90, minorTicks: 5};
  chart.draw(data, options);

  csi_timer.tick('draw');
  window.jstiming.report(csi_timer);  

  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>

  </body>
</html>

【讨论】：

【解决方案2】：

他们的演示使用伪随机数生成器来更新图表。这有点误导。

我使用他们的代码绘制初始图表，然后使用 ajax 调用从 php.ini 获取更新后的数据作为 json 字符串。然后我填充数据表并使用 jQuery/javascript 更新图表。我还没有开始制作完整的教程，但 b/c 它还没有准备好投入生产......

最困难的部分是在服务器端正确格式化您的数据并提供 ajax 而不破坏浏览器。代码看起来非常快，当您监控网络服务器时，您有点希望图像渲染在其他地方完成。它可以工作，但在这一点上，它还不是完全与浏览器无关——这就是我选择在 jQuery 中使用 re-write 的原因。

据我所知，您的网页排名无关...

【讨论】：

【解决方案3】：

所有解决方案都使用随机生成的数字为演示的仪表设置动画。如果您想同时显示一个真实的价值并为其设置动画怎么办？这是解决方案：

Code it yourself on JSFiddle

  function isEven(n) {
     return n % 2 == 0;// true|false
  }
  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);
// Animate Gauges: (ArrayNum(start:0), ColumnInThatArray(start:0), NewValue) 
// OR in anoher words(rowIndex, columnIndex, NewValue)

    setInterval(function() {
      var chartValue = data.getValue(0, 1);
      if (isEven(chartValue)){
      data.setValue(0, 1, (chartValue + 5));
      } else {
      data.setValue(0, 1, (chartValue - 5));
      }
      chart.draw(data, options);
    }, 450);// milisecond
    setInterval(function() {
      var chartValue = data.getValue(1, 1);
      if (isEven(chartValue)){
      data.setValue(1, 1, (chartValue + 1));
      } else {
      data.setValue(1, 1, (chartValue - 1));
      }
      chart.draw(data, options);
    }, 600);// milisecond
    setInterval(function() {
      var chartValue = data.getValue(2, 1);
      if (isEven(chartValue)){
      data.setValue(2, 1, (chartValue + 3));
      } else {
      data.setValue(2, 1, (chartValue - 3));
      }
      chart.draw(data, options);
    }, 1000);// milisecond
  }

【讨论】：