每5秒钟更新一次jqplot仪表量表 [英] updating jqplot meter gauge after every 5 seconds

问题描述

我正在模态窗口中显示jqplot仪表规，我想每5秒更新一次.我写了下面的代码，但是不起作用

I am displaying jqplot meter gauge inside modal window and I want to update it after every 5 seconds. I wrote the following code but it is not working

$(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秒更新一次仪表?

How can I update meter gauge every 5 seconds without updating whole page?

推荐答案

此处是解决方法: JsFiddle链接

$(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);
});

这篇关于每5秒钟更新一次jqplot仪表量表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！