Question

我正在使用highstocks图表库和JQuery来解决这个问题。我正在尝试创建一个分为三个部分的图表，每个图表都有一组不同的数据。要读入数据，我使用的是highstock网站上的一个示例，其代码如下：

var seriesOptions = [],
        names = ['MSFT', 'AAPL', 'GOOG'];

    $.each(names, function(i, name) {
        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
            seriesOptions[i] = {
                name: name,
                data: data
            };            
        });
    });

处理完此代码后，我使用seriesOptions变量作为三个图表中每个图表的系列值：

$('#container').highcharts('StockChart', {
    // misc options
    series: [
        seriesOptions[0],
        seriesOptions[1],
        seriesOptions[2],
    ]
}

但是，似乎在null方法调用之后，seriesOptions变量为$.getJSON()。如何解决此问题，以及seriesOptions调用后$.getJSON()变量发生了什么？

由于

编辑：具体错误： Uncaught TypeError: Cannot read property 'type' of undefined。我很确定这是指seriesOptions变量，但为了清楚起见，我会将其包括在内。

Answer 1

您可能在AJAX通话完成之前执行highCharts调用。您还在循环中进行AJAX调用（虽然是一个小循环，它仍然可以有相同的一般问题） - 如果您可以 - 尝试与所有的一起进行这个1 AJAX调用PARAMS。如果这不是一个选项 - 您可以循环，并验证所有调用已完成，然后处理：

var seriesOptions = [],
    names = ['MSFT', 'AAPL', 'GOOG'];

var completedCalls = 0;
for (var i = 0; i < names.length; i++) {
    var name = names[i];
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
        seriesOptions.push({
            name: name,
            data: data
        });

        completedCalls++;    
        if (completedCalls == names.length) {
            //All ajax calls done, do highcharts magic!
            $('#container').highcharts('StockChart', {
                // misc options
                series: [
                    seriesOptions[0],
                    seriesOptions[1],
                    seriesOptions[2],
                ]
            })
        }        
    });
}

Answer 2

jQuery提供了一个使用$.when的接口，用于使用deferred / promise对象解析多个ajax调用。使用您的配置的示例如下所示。

var seriesOptions = [];

$.when(
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=msft-c.json&callback=?'),
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?'),
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?')
).done(function (r1, r2, r3) {
    seriesOptions.push({
        name: "MSFT",
        data: r1
    });
    seriesOptions.push({
        name: "AAPL",
        data: r2
    });
    seriesOptions.push({
        name: "GOOG",
        data: r3
    });

    $('#container').highcharts('StockChart', {
        // misc options
        series: [
            seriesOptions[0],
            seriesOptions[1],
            seriesOptions[2],
        ]
    });
});

获取JSON数据后无法保留变量

2 个答案: