我想按时间间隔顺序更新jqPlot绘制的图表。
我的用例是AJAX调用只返回一个值。例如:
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中提取已绘制的数据,然后附加这个新数据集并重绘图形吗?
任何人都可以帮忙吗?
答案 0 :(得分:14)
您需要将数据存储在一个数组中,然后在每个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")
}
}
答案 1 :(得分:5)
让我添加@charlietfl回答。当你使用replot()时,重绘需要2倍的时间,而不是破坏jqplot。所以使用destroy()来重绘绘图。
$.jqplot('chart1', [storedData]).replot();
http://jsfiddle.net/zjjvm/使用replot()
绘制正弦运行需要46秒plot1.destroy();
plot1 = $.jqplot('chart1', [storedData])
http://jsfiddle.net/p9SbP/使用destroy()
绘制相同的时间需要25秒