每5秒更新一次jqplot米规

时间:2013-10-05 10:46:06

标签: javascript jqplot

我在模态窗口内显示jqplot米规,我想每隔5秒更新一次。我编写了以下代码,但它无法正常工作

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

1 个答案:

答案 0 :(得分: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);
});