在highchart中加载外部json文件

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