javascript - setInterval 与 Morris 图数据的 jQuery 帖子

Question

我正在使用 jQuery 从我的 Controller (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);

            });
}