Question

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

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

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

（另外，这些衡量标准会减慢我连接谷歌的网站吗？另一方面，它会提升我的排名吗？）

Answer 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>

Answer 2

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

我使用他们的代码绘制初始图表，然后使用ajax调用以json字符串的形式获取更新的数据 - 来自php。然后我填充数据表并使用jQuery / javascript更新图表。我还没有完成一个完整的教程，但尚未准备好进行制作...

最困难的部分是在服务器端正确格式化数据，并在不烧毁浏览器的情况下提供ajax。代码看起来非常快，当您监控网络服务器时，您希望图像渲染能够在其他地方完成。它可以正常工作，但在这一点上，它仍然不是完全与浏览器无关 - 这就是我选择在jQuery中重写的原因。

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

Answer 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
  }

如何：动态移动Google Gauge？

3 个答案: