2013-10-05 38 views
1

我在模态窗口内显示jqplot测量仪表,我想每5秒钟更新一次。我写了下面的代码,但它不起作用每5秒更新一次jqplot测量仪表

$(document).ready(function(){ 
s1 = [Math.floor(Math.random()*(401)+100)]; 

plot3 = $.jqplot('meter',[s1],{ 
    seriesDefaults: { 
     renderer: $.jqplot.MeterGaugeRenderer, 
     rendererOptions: { 
      min: 100, 
      max: 500, 
      intervals:[200, 300, 400, 500], 
      intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'], 
      smooth: true, 
      animation: { 
       show: true 
      } 
     } 
    } 
}); 
$('a[href=\"#yw1_tab_3\"]').on('shown', function(e) { 
      if (plot3._drawCount === 0) { 
      plot3.replot(); 
     } 
     }); 
     windows.setInterval(function() { plot3.destroy(); 
     s1 = [Math.floor(Math.random()*(401)+100)]; 
     plot3.replot(); 
     }, 5000); 
}); 

如何在不更新整个页面的情况下每5秒更新一次流量计?

回答

2

这里是修复:JsFiddle link

$(document).ready(function() { 
    var s1 = [Math.floor(Math.random() * (401) + 100)]; 

    var plot3 = $.jqplot('meter', [s1], { 
     seriesDefaults: { 
      renderer: $.jqplot.MeterGaugeRenderer, 
      rendererOptions: { 
       min: 100, 
       max: 500, 
       intervals: [200, 300, 400, 500], 
       intervalColors: ['#66cc66', '#93b75f', '#E7E658', '#cc6666'], 
       smooth: true, 
       animation: { 
        show: true 
       } 
      } 
     } 
    }); 
    setInterval(function() { 
     s1 = [Math.floor(Math.random() * (401) + 100)]; 
     plot3.series[0].data[0] = [1,s1]; //here is the fix to your code 
     plot3.replot(); 
    }, 1000); 
}); 
+0

感谢Gyandeep的解决方案。 – prattom

+0

这个jsfiddle不适合我。我看到其他的例子在jsfiddle上适用于不同的图表类型,但是没有一个适用于MeterGauge。任何想法发生了什么? –

+0

它看起来像jqplot扩展不能再被访问:“无法加载资源:服务器响应状态403(禁止)” –