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调用完成之前执行。

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

1 个答案: