使用flot.js填充图形的多个ajax调用

Question

我使用flot.js创建图形。我需要从后端的3个独立表中获取数据，我使用3个Ajax调用来检索它。但是当我第一次调用该函数时图形没有被创建，但随后的调用工作正常。

var datasets = []; // global dataset 
var option = { 
    series: { 
     lines: { show: true }, 
     points: { 
      radius: 3, 
      show: true 
     } 
    }, 
    legend: { 
     show: true, 
     container: '#legendholder' 
    } 
}; 

function sendName() { 
    var sel = document.getElementById('name'); 
    var name = sel.options[sel.selectedIndex].value; 
    selName = encodeURIComponent(name); 

    if(selName == "option") { 
     document.getElementById("result").innerHTML="<p>Result will be displayed here. Please select drop-down</p>"; 
     return; 
    } 
    if (selName == ""){ 
     document.getElementById("result").innerHTML="<b>Empty string input!</b>"; 
     return; 
    } 

     $.ajax({ 
     url:  "demo1.php?name=" + selName, 
     method: "GET", 
     dataType: "json", 
     success: function(series) { 
      var json = eval(series); 
      var arr = new Array(); 

      for (var i = 0; i < json.length; i++) { 
       arr.push(new Array(2007, json[i].y2007)); 
       arr.push(new Array(2008, json[i].y2008)); 
       arr.push(new Array(2009, json[i].y2009)); 
       arr.push(new Array(2010, json[i].y2010)); 
       arr.push(new Array(2011, json[i].y2011)); 
       arr.push(new Array(2012, json[i].y2012)); 
       arr.push(new Array(2013, json[i].y2013)); 
       arr.push(new Array(2014, json[i].y2014)); 
       arr.push(new Array(2015, json[i].y2015)); 
       arr.push(new Array(2016, json[i].y2016)); 
      }  

      datasets.push({ 
      label: "demo1", 
      data: arr 
      }); 

     } 
    }); 

    $.ajax({ 
     url:  "demo2.php?name=" + selName, 
     method: "GET", 
     dataType: "json", 
     success: function(series) { 
      var json = eval(series); 
      var arr1 = new Array(); 

      for (var i = 0; i < json.length; i++) { 
       arr1.push(new Array(2007, json[i].y2007)); 
       arr1.push(new Array(2008, json[i].y2008)); 
       arr1.push(new Array(2009, json[i].y2009)); 
       arr1.push(new Array(2010, json[i].y2010)); 
       arr1.push(new Array(2011, json[i].y2011)); 
       arr1.push(new Array(2012, json[i].y2012)); 
       arr1.push(new Array(2013, json[i].y2013)); 
       arr1.push(new Array(2014, json[i].y2014)); 
       arr1.push(new Array(2015, json[i].y2015)); 
       arr1.push(new Array(2016, json[i].y2016)); 
      }   

      datasets.push({ 
      label: "demo2", 
      data: arr1 
      }); 

     } 
    }); 

    $.ajax({ 
     url:  "demo3.php?name=" + selName, 
     method: "GET", 
     dataType: "json", 
     success: function(series) { 
      var json = eval(series); 
      var arr2 = new Array(); 

      for (var i = 0; i < json.length; i++) { 
       arr2.push(new Array(2007, json[i].y2007)); 
       arr2.push(new Array(2008, json[i].y2008)); 
       arr2.push(new Array(2009, json[i].y2009)); 
       arr2.push(new Array(2010, json[i].y2010)); 
       arr2.push(new Array(2011, json[i].y2011)); 
       arr2.push(new Array(2012, json[i].y2012)); 
       arr2.push(new Array(2013, json[i].y2013)); 
       arr2.push(new Array(2014, json[i].y2014)); 
       arr2.push(new Array(2015, json[i].y2015)); 
       arr2.push(new Array(2016, json[i].y2016)); 
      }   

      datasets.push({ 
      label: "demo3", 
      data: arr2 
      }); 

     } 
    }); 

    $.plot($("#result"), datasets , option); 
    var div = document.getElementById('result'); 
    div.style.backgroundColor = 'white'; 
    $("#chartFoo div.legend table").css({ border: "1px solid #888888", background: "#ffffee"}); 

    datasets = []; // empty the legend for next calls 
} 

基本上每次更改下拉列表时都会调用sendName函数。 有人能帮助我，为什么发生这种情况...

Answer 1

许多问题我看，没有特定的顺序...

1）

document.getElementById("result").innerHTML="<p>Result will be displayed here. Please select drop-down</p>"; 

你已经拥有jquery加载使用它：

$('#result').html("<p>Result will be displayed here. Please select drop-down</p>"); 

2.）

var json = eval(series); 

由于您的dataType是JSON，它应该返回一个JSON OBJ，你不需要EVAL。

3）

你的大问题是，你不要在你的ajax呼叫的成功处理程序打印或重新情节你的图表。您

datasets.push({ 
     label: "demo3", 
     data: arr2 
}); 

然后，您可以退出成功处理程序，没有中的情节......

这条线：

$.plot($("#result"), datasets , option); 

将ajax调用完成之前执行。