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

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],
    ]
}

不过，似乎seriesOptions变量在$.getJSON()方法调用出来后是null。我怎样才能解决这个问题，$.getJSON() 调用后 seriesOptions 变量发生了什么？

谢谢

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

Answer 1

您可能在 AJAX 调用完成之前执行了 highCharts 调用。您还在循环中进行 AJAX 调用（尽管是一个小循环，但它仍然可能存在相同的一般问题）-如果您可以 - 尝试将此设为 1 AJAX 调用所有参数。如果那不是一个选项 - 您可以循环并验证所有调用是否已完成，然后处理：

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 数据后无法保留变量

Unable to hold onto variable after fetching JSON data

javascript

jquery

json

highstock