如何:动态移动Google Gauge？

Question

如何:动态移动Google Gauge？

Gre*_*lty 6 html javascript xml asp.net

观察CPU和内存仪表一秒钟.他们动态地移动.

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

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

(另外,这些衡量标准会减慢我连接谷歌的网站吗？另一方面,它会提高我的排名吗？)

Answer 1

And*_*ter 6

示例代码和实际演示是不同的.试试这个:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，5 月前
查看次数：	5853 次
最近记录：	9 年，1 月前