在highchart中加载外部json文件 [英] Loading external json file in highchart

问题描述

在HighCharts中加载外部JSON文件时，它在浏览器中不显示任何内容。我有以下JSON数据。我在我的HTML代码的头中包含了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（{
图表：{
类型：'列'
}，
 xAxis：{
类型：类别
}，
系列：[{
 data：processed_json 
}] 
}）; 
  

解决方案

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

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

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

代码：

  var json = [{
key：Apples，
value ：4
}，{
key：Pears，
value：7
}，{
key：香蕉，
价值：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（）; 
 
 
函数loadJson（）{
 $（'＃container'）。highcharts（{
图：{
类型：'列'
}，
 xAxis：{
 type：category
}，
 series：[{
 data：processed_json 
}] 
}）; 
} 
  

When loading external JSON file in HighCharts it shows nothing in the browser. I have following JSON data. I have included highchart.js and jquery.js in the head of my HTML code, but still I cannot get a bar chart in my browser. No error is shown in console when checking the console.

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

解决方案

That is because the order of execution is different than we expect. ie The JSON loading section execution is happening before it get initialized.

You can put the JSON loading section code in one function and call that function after initialization function is completed(.success or .done in the HTML element's event).

I had one AJax function so I called this JSON loading function in the success of that AJAX call.

Code:

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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！