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

前端之家收集整理的这篇文章主要介绍了jquery – 带有动态ajax数据的JQPlot自动刷新图表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想按时间间隔顺序更新jqPlot绘制的图表.

我的用例是这样的,AJAX调用只返回一个值.例如:

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

所以我想把图形绘制成:

  1. First: only 20
  2. Second: 20,30
  3. Third: 20,30,40
  4. Fourth: 20,40,32

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

任何人都可以帮忙吗?

解决方法

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

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

  1. /* store empty array or array of original data to plot on page load */
  2.  
  3. var storedData = [3,7];
  4.  
  5. /* initialize plot*/
  6.  
  7. var plot1;
  8. renderGraph();
  9.  
  10. $('button').click( function(){
  11. doUpdate();
  12. $(this).hide();
  13. });
  14.  
  15. function renderGraph() {
  16. if (plot1) {
  17. plot1.destroy();
  18. }
  19. plot1 = $.jqplot('chart1',[storedData]);
  20. }
  21. /* sample data for demo*/
  22. var newData = [9,1,4,6,8,2,5];
  23.  
  24.  
  25. function doUpdate() {
  26. if (newData.length) {
  27. /* used to pull new number from sample data for demo*/
  28. var val = newData.shift();
  29.  
  30. $.post('/echo/html/',{
  31. html: val
  32. },function(response) {
  33. var newVal = new Number(response); /* update storedData array*/
  34. storedData.push(newVal);
  35. renderGraph();
  36. setTimeout(doUpdate,3000)
  37. })
  38.  
  39. } else {
  40. alert("All Done")
  41. }
  42. }

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

猜你在找的jQuery相关文章