带有动态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中提取已绘制的数据，然后附加这个新数据集并重绘图形吗？
任何人都可以帮忙吗？
您需要将数据存储在一个数组中，然后在每个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/
让我加入@charlietfl回答。 当你使用replot（）时，重绘需要2倍，而不是破坏jqplot。 所以使用destroy（）来重绘绘图。
$.jqplot('chart1', [storedData]).replot();
http://jsfiddle.net/zjjvm/使用replot（）绘制正在运行的正弦需要46秒
plot1.destroy(); plot1 = $.jqplot('chart1', [storedData])