具有动态Ajax数据的JQPlot自动刷新图表 [英] JQPlot auto refresh chart with dynamic ajax data

问题描述

我想按时间间隔顺序更新jqPlot绘制的图表.

I want to update the chart drawn by jqPlot sequentially in time intervals.

我的用例是AJAX调用仅返回单个值.例如:

My use case is such that the AJAX call returns only a single value. For e.g.:

1st AJAX call: 20
2nd AJAX call: 30
3rd AJAX call: 40
4th AJAX call: 32

所以我想绘制如下图:

First: only 20
Second: 20,30
Third: 20,30,40
Fourth: 20,30,40,32

我们可以在JQPlot中提取已经绘制的数据，然后追加这个新数据集并重绘图形吗?

Can we extract already plotted data in JQPlot and then append this new data set and redraw the graph??

请问有人可以帮忙吗?

推荐答案

您将需要将数据存储在数组中，然后在每次ajax调用中将新数据推送到该数组中.

You will need to store the data in an array then push new data to the array within each ajax call.

这是一个简单的演示，使用一个按钮以3秒的间隔启动AJAX更新:

Here is a simple demo using a button to start the AJAX updates on a 3 second interval:

/* store empty array or array of original data to plot on page load */

var storedData = [3, 7];

/* initialize plot*/

var plot1;
renderGraph();

$('button').click( function(){
    doUpdate();
    $(this).hide();
});

function renderGraph() {
    if (plot1) {
        plot1.destroy();
    }
    plot1 = $.jqplot('chart1', [storedData]);
}
/* sample data for demo*/   
var newData = [9, 1, 4, 6, 8, 2, 5];


function doUpdate() {
    if (newData.length) {
        /* used to pull new number from sample data for demo*/
        var val = newData.shift();

        $.post('/echo/html/', {
            html: val
        }, function(response) {
            var newVal = new Number(response); /* update storedData array*/
            storedData.push(newVal);
            renderGraph();               
            setTimeout(doUpdate, 3000)
        })

    } else {
        alert("All Done")
    }
}

演示: http://jsfiddle.net/ZqCXP/

这篇关于具有动态Ajax数据的JQPlot自动刷新图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！