Cargando archivo json externo en highchart

Al cargar un archivo JSON externo en HighCharts, no muestra nada en el navegador. Tengo los siguientes datos JSON. He incluido highchart.js y jquery.js en el head de mi código HTML, pero aún así no puedo obtener un gráfico de barras en mi navegador. No se muestra ningún error en la consola al verificar la consola.

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

Eso es porque el orden de ejecución es diferente de lo que esperamos. es decir, la ejecución de la sección de carga JSON se está produciendo antes de que se inicialice.

Puede poner el código de la sección de carga JSON en una función y llamar a esa función después de que se complete la función de inicialización (.success o .done en el evento del elemento HTML).

Tenía una función AJax, así que llamé a esta función de carga JSON en el éxito de esa llamada AJAX.

Código:

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