在 highchart 中加载外部 json 文件

Question

在 HighCharts 中加载外部 JSON 文件时，它在浏览器中不显示任何内容。我有以下 JSON 数据。我在我的 HTML 代码的head 中包含了 highchart.js 和 jquery.js，但我仍然无法在浏览器中获得条形图。检查控制台时，控制台中没有显示错误。

var json = [{
    "key": "Apples",
    "value": "4"
}, {
    "key": "Pears",
    "value": "7"
}, {
    "key": "Bananas",
    "value": "9"
}];

var processed_json = new Array();
$.map(json, function(obj, i) {
    processed_json.push([obj.key, parseInt(obj.value)]);
});

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        type: "category"
    },
    series: [{
        data: processed_json
    }]
});

Answer 1

那是因为执行顺序与我们预期的不同。即 JSON 加载部分的执行是在它被初始化之前发生的。

您可以将 JSON 加载部分代码放在一个函数中，并在初始化函数完成后调用该函数（HTML 元素事件中的 .success 或 .done）。

我有一个 AJax 函数，所以我在 AJAX 调用成功时调用了这个 JSON 加载函数。

代码：

var json = [{
    "key": "Apples",
    "value": "4"
}, {
    "key": "Pears",
    "value": "7"
}, {
    "key": "Bananas",
    "value": "9"
}];

var processed_json = new Array();
$.map(json, function(obj, i) {
    processed_json.push([obj.key, parseInt(obj.value)]);
});
if (processed_json.length != 0) {
   loadJson();
}

function loadJson() {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            type: "category"
        },
        series: [{
            data: processed_json
        }]
    });
}