Блог

При загрузке внешнего файла JSON в HighCharts он ничего не показывает в браузере. У меня есть следующие данные JSON. Я включил highchart.js и jquery.js в head моем HTML-коде, но я все еще не могу получить гистограмму в своем браузере. При проверке консоли ошибка не отображается в консоли.

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

Это потому, что порядок выполнения отличается от ожидаемого. т.е. Выполнение раздела загрузки JSON происходит до его инициализации.

Вы можете поместить код раздела загрузки JSON в одну функцию и вызвать эту функцию после завершения инициализации (.success или .done в событии элемента HTML).

У меня была одна AJax-функция, поэтому я вызвал эту функцию загрузки JSON при успешном выполнении этого AJAX-вызова.

Код:

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