带有动态ajax数据的JQPlot自动刷新图表

我想按时间间隔顺序更新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中提取已绘制的数据，然后附加这个新数据集并重绘图形吗？

任何人都可以帮忙吗？

Answer 1

您需要将数据存储在一个数组中，然后在每个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") } } 

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

Answer 2

让我加入@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秒才能绘制相同的内容