Question

我每10秒钟从数据库和重新绘制图表中获取图表绘图点，以便数据库中的任何更改都反映在图表上。但在我的情况下，这只是在我重新加载页面时无法正常工作和图表更改。以下是我的代码

 <?php
   $z_data = json_encode($this->testData('123'));
  ?>

javascript代码

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    var s2 = $z_data;
    var plot5 = $.jqplot('big', [s2], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
            }
        },
        highlighter: { show: false }
    });
    $('a[href="#dash4"]').on('shown', function(g) {
        plot5.replot();
    });

    setInterval(function () {
        var s4 = [];
        var toi = $z_data
        for (var k=0; k<11; k++){ 
            s4.push([k, toi[k]]);
        }


        $('#big').unbind();
        plot5.destroy();
        plot5.series[0].data = s4;
        plot5.resetAxesScale();
        plot5.replot(true);
        }, 
        10000
    );

    $.jqplot.config.enablePlugins = false;

});

我犯错误的地方？此外，数据库每5秒更新一次，因此更改应该反映在图表上，因为我每10秒更新一次。

Answer 1

以下是解决方案：JsFiddle link

在示例中，我假设虚拟数据来证明代码概念。

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    var s2 = [1,2,4,5,7,23,4,40,7,3,8];
    var plot5 = $.jqplot('big', [s2], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
            }
        },
        highlighter: { show: false }
    });
    $('a[href="#dash4"]').on('shown', function(g) {
        plot5.replot();
    });

    setInterval(function () {
        var s4 = [];
        s2.shift();
        var toi = s2;
        toi.push(Math.round(Math.random()*10));
        for (var k=0; k<11; k++){ 
            s4.push([k+1, toi[k]]);
        }

        plot5.destroy();
        plot5.series[0].data = s4;
        plot5.replot(true);
        }, 
        10000
    );

});

Answer 2

您必须将plot5定义为全局变量。

jqplot replot不适用于条形图

2 个答案: