html5 图表 自动刷新,jquery – 带有动态ajax数据的JQPlot自动刷新图表

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

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

/* 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")

}

}