高分与jQuery.ajax:如何初始化/作用域问题

Highscore with jQuery.ajax: How to Initialize / Scope Issue

本文关键字：初始化作用域问题 jQuery ajax 更新时间：2023-09-26

我是JS的新手，所以这可能是一个愚蠢的问题…

我尝试做一个Hilicore Master/Detail图表(见示例http://jsfiddle.net/VhqaQ/)。data数组应该用jQuery填充。ajax调用:

$(function () {
    var masterChart,
        detailChart,
        data=[],
        chatter=[],
        indizies=[];
    $(document).ready(function() {
        $.ajax({
            url: 'index.php',
            data: 'type=1363435001',
            dataType: 'json',
            success: function(json) {
                data = json.range;
                scatter =  json.scatter;
                indizies = json.indizies;
            },
            error: function (xhr, status, error) {
               alert('Status: ' + status +' Error: ' + error);
            }
        });
        // create the master chart
        function createMaster() {
            masterChart = new Highcharts.Chart({
            .......
                series: [{
                    type: 'columnrange',
                    name: 'Intervall',
                    pointInterval: 1,
                    pointStart: 0,
                    data: data
                }],
            });
        }
            ........
        createMaster();
   });
});

但是像这样，图表是空的。这是data阵列的作用域问题吗?或者当new Highcharts.Chart( ...)被调用时，data还没有初始化?

我测试了ajax部分-数据被正确填充。所以这不是问题…

也许我应该把ajax调用在其他地方?

在$的回调中调用createMaster()。调用Ajax并将数据传递给它。您目前假设在ajax调用初始化时已经返回了数据，但事实很可能并非如此。将函数调用放在回调函数内部，确保您的数据存在。

$.ajax({
    url: 'index.php',
    data: 'type=1363435001',
    dataType: 'json',
    success: function(json) {
        data = json.range;
        scatter =  json.scatter;
        indizies = json.indizies;
        createMaster(data);
    },
    error: function (xhr, status, error) {
        alert('Status: ' + status +' Error: ' + error);
    }
});
// create the master chart
    function createMaster(data) {
        masterChart = new Highcharts.Chart({
        .......
            series: [{
                type: 'columnrange',
                name: 'Intervall',
                pointInterval: 1,
                pointStart: 0,
                data: data
            }],
        });
    }