Question

如何在固定时间间隔（例如10秒）后更新jqplot条形图？我编写了以下代码，其中y轴数据是随机生成的，但是在固定的时间间隔后它没有更新。

<?php 
$x = array();
$y = array();
for($i=0;$i<50; $i++)
{
$x[] = $i;
$y[] = rand(10, 200);
}

$x_data = json_encode($x);
$y_data = json_encode($y);

Yii::app()->clientScript->registerScript('chart_big',"
$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    var s2 = $y_data;
    var ticks = $x_data;

    plot5 = $.jqplot('chart_big', [s2], {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        },
        highlighter: { show: false }
    });

    $('#chart1').bind('jqplotDataClick',
        function (ev, seriesIndex, pointIndex, data) {
            $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
        }
    );
    $('a[href=\"#yw1_tab_4\"]').on('shown', function(g) {
            if (plot5._drawCount === 0) {
            plot5.replot();
        }
    });


   setInterval(function () {

      s2 = $y_data;
      ticks = $x_data;
      plot5.series[0].data = s2; 
      plot5.replot();
   }, 10000);


});
");
?>

Answer 1

你应该看一下这个例子：http://gayashan-a.blogspot.com/2012/08/simple-dynamically-updating-line-chart.html

Answer 2

尝试$('#chart_big').unbind();plot5.destroy();，然后使用新数据进行绘图。重制（）;可能会导致内存泄漏。

请参阅此SO Question

在固定的时间间隔后更新jqplot条形图

2 个答案: