Question

我使用jQuery从我的控制器（codeigniter）发布和检索数据。我检索数据没问题。我想使用setInterval来更新morris数据并使morris数据（JSON数据）动态化。问题是，当我使用setinterval向控制器重新发送更新请求时，图形消失了！我正在使用codeigniter输出：

$this->output
->set_status_header(200)
->set_content_type('application/json', 'utf-8')
->set_output(json_encode($data1['query'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES))
->_display();
exit;

这是我尝试使用的JavaScript代码：

var json = (function () {
        var json = null;
        setInterval(function() {
        $.post( "/login/DailyAverageWaitingtime", function( data ) {
            json = data;
        });
        }, 5000);
        return json;
    })
    ();

    Morris.Area({
    element: 'DailyAverageWaitingtime',
    padding: 10,
    behaveLikeLine: true,
    gridEnabled: false,
    gridLineColor: '#dddddd',
    axes: true,
    fillOpacity:.7,
    data:json.result_object,
    lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
    xkey: 'date',
    ykeys:['records','waiting'],
    labels: ['Records','Waiting'],

    pointSize: 0,
    lineWidth: 0,
    hideHover: 'auto'
});

Answer 1

最后我解决了这个问题！

这是在第一时间创建图形的临时函数：

function DailyAverageWaitingtime(){
    var DailyAverageWaitingtime;
        $.post( "/login/DailyAverageWaitingtime", function( data ) {
            DailyAverageWaitingtime = Morris.Area({
                element: 'DailyAverageWaitingtime',
                data: data.result_object,
                xkey: 'date',
                ykeys: ['records', 'waiting'],
                labels: ['Records', 'Waiting'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
            });

调用更新功能的间隔：

            setInterval(function() { UpdateDailyAverageWaitingtime(DailyAverageWaitingtime); }, 20000);
        }, "json"); 
}

这是每X秒更新一次数据：

function UpdateDailyAverageWaitingtime(DailyAverageWaitingtime){
    $.post( "/login/DailyAverageWaitingtime", function( data ) {
        DailyAverageWaitingtime.setData(data.result_object);
        myRecords.setData(data.result_object);

            });
}

Answer 2

        var json = null;
        setInterval(function() {
        $.post( "/login/DailyAverageWaitingtime", function( data ) {
            json = data;
        });
        }, 5000);


    Morris.Area({
    element: 'DailyAverageWaitingtime',
    padding: 10,
    behaveLikeLine: true,
    gridEnabled: false,
    gridLineColor: '#dddddd',
    axes: true,
    fillOpacity:.7,
    data:json.result_object,
    lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
    xkey: 'date',
    ykeys:['records','waiting'],
    labels: ['Records','Waiting'],

    pointSize: 0,
    lineWidth: 0,
    hideHover: 'auto'
});

对包含函数

的变量使用不同的名称

用于Morris图数据的jQuery post的setInterval

2 个答案: