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
        }]
    });
}

在highchart中加载外部json文件

1 个答案: