使用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調用完成之前執行。