Асинхронный ввод данных в highcharts

Question

Я загружаю данные из базы данных MySQL с помощью метода $ .getJSON. Затем все данные отображаются в диаграммах. Существуют разные кнопки, которые пользователь может щелкнуть, чтобы изменить между наборами данных. Моя проблема заключается в том, что когда страница загружается впервые, диаграмма всегда будет загружаться пустым. Я узнал, что это, вероятно, потому, что метод $ .getJSON, который я использую для извлечения данных, является асинхронным. Я не уверен, можно ли это решить, переключив метод getJSON на метод AJAX. Я попытался, но не смог. Или это моя функция javascript для переключения данных диаграммы при нажатии кнопки, что является проблемой. Ниже приведен весь код. После этого фрагменты кода, которые, как мне кажется, отвечают за проблему, показаны ниже. Я знаю, что вам может понадобиться JSFiddle, но поскольку я использую данные базы данных, я теперь знаю, как правильно отображать проблему.

<script> 
    var d = new Date(); 
    var pointStart = d.getTime(); 
    //------------------------------------------------------- 
    //set a 'line' marker type for use in bullet charts 
    Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) { 
    return ['M', x, y + width/2, 'L', x + height, y + width/2]; 
    }; 
    Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) { 
    return ['M', x, y + height/2, 'L', x + width, y + width/2]; 
    }; 
    //------------------------------------------------------- 
    Highcharts.setOptions({ 
    global: { 
     useUTC: false 
    }, 
    colors: [ 
     'rgba(253, 99, 0, 0.9)', //bright orange 
     'rgba(40, 40, 56, 0.9)', //dark 
     'rgba(253, 0, 154, 0.9)', //bright pink 
     'rgba(154, 253, 0, 0.9)', //bright green 
     'rgba(145, 44, 138, 0.9)', //mid purple 
     'rgba(45, 47, 238, 0.9)', //mid blue 
     'rgba(177, 69, 0, 0.9)', //dark orange 
     'rgba(140, 140, 156, 0.9)', //mid 
     'rgba(238, 46, 47, 0.9)', //mid red 
     'rgba(44, 145, 51, 0.9)', //mid green 
     'rgba(103, 16, 192, 0.9)' //dark purple 
    ], 
    chart: { 
     alignTicks: false, 
     type: '', 
     margin: [70, 100, 70, 90], 
     //borderRadius:10, 
     //borderWidth:1, 
     //borderColor:'rgba(156,156,156,.25)', 
     //backgroundColor:'rgba(204,204,204,.25)', 
     //plotBackgroundColor:'rgba(255,255,255,1)', 
     style: { 
     fontFamily: 'Abel,serif' 
     }, 
     events: { 
     load: function() { 
      this.credits.element.onclick = function() { 
      window.open(
       '' 
      ); 
      } 
     } 
     } 
    }, 

    }); 
</script> 



<script> 
var chart, 
    chartOptions = {}, 
    chartData = {}; 


chartOptions.chart1 = { 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: '<?php echo $companyName; ?>', 
    style: { 
     fontSize: '20px' 
    } 
    }, 
    subtitle: { 
     text: 'Revenues', 
     align: 'left', 
     x: 55, 
     style: { 
     fontSize: '16px' 
     } 
    }, 
    xAxis: { 
    categories: [] 
    }, 
    yAxis: { 
    title: { 
     text: '<?php echo $unitCurr; ?>' 
    } 
    }, 
    series: [{ 
    name: 'Revenues', 
    color: '#006699', 
    data: [] 
    }] 
}; 
var tableName = '<?php echo $tableName; ?>' 
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) { 
    chartOptions.chart1.xAxis.categories = json[0]['data']; 
    chartOptions.chart1.series[0].data = json[1]['data']; 
}); 


chartOptions.chart2 = { 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: '<?php echo $companyName; ?>', 
    style: { 
     fontSize: '20px' 
    } 
    }, 
    subtitle: { 
     text: 'Earnings before interest and taxes', 
     align: 'left', 
     x: 55, 
     style: { 
     fontSize: '16px' 
     } 
    }, 
    xAxis: { 
    categories: [] 
    }, 
    yAxis: { 
    title: { 
     text: '<?php echo $unitCurr; ?>' 
    } 
    }, 
    series: [{ 
    name: 'EBIT', 
    color: '#006699', 
    data: [] 
    }] 
}; 
var tableName = '<?php echo $tableName; ?>' 
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) { 
    chartOptions.chart2.xAxis.categories = json[0]['data']; 
    chartOptions.chart2.series[0].data = json[4]['data']; 
}); 

$(function() { 

    //common options 
    Highcharts.setOptions({ 
    chart: { 
     marginRight: 0 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     bar: { 
     pointPadding: .01 
     }, 
     column: { 
     borderWidth: 0.5 
     }, 
     line: { 
     lineWidth: 1 
     }, 
    }, 
    series: [{ 
     color: '#027ff7', 
    }] 
    }); 
     $('#container').highcharts(chartOptions.chart1); 
     chart = $('#container').highcharts(); 

     $(document).on('click', '.chart-update', function() { 
     $('button').removeClass('selected'); 
      $(this).addClass('selected'); 
      chart.destroy(); 
     $('#container').highcharts(chartOptions[$(this).data('chartName')]); 
     chart = $('#container').highcharts(); 
     }); 
}); 



</script> 
</head> 



<body> 

    <span class="wrapper"> 
     <span class="block chart"><div id="container" style="width:400px;height:300px;margin:1.5em 1em;float:left;"></div></span> 
     <span class="block buttons"> 
      <div><button class="chart-update selected" data-chart-name="chart1">CHART1</button></div> 
      <div><button class="chart-update" data-chart-name="chart2">CHART2</button></div> 

     </span> 
    </span> 



</body> 

</html> 

Так конкретно мне интересно, будь два сегмента ниже отвечают за проблемы:

var tableName = '<?php echo $tableName; ?>' 
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) { 
    chartOptions.chart2.xAxis.categories = json[0]['data']; 
    chartOptions.chart2.series[0].data = json[4]['data']; 
}); 

или

 $('#container').highcharts(chartOptions.chart1); 
     chart = $('#container').highcharts(); 

     $(document).on('click', '.chart-update', function() { 
     $('button').removeClass('selected'); 
      $(this).addClass('selected'); 
      chart.destroy(); 
     $('#container').highcharts(chartOptions[$(this).data('chartName')]); 
     chart = $('#container').highcharts(); 
     }); 

Я попытался переключиться из метода JSON с помощью AJAX вместо async установлен в false. Это показано ниже (не работает, и данные не отображаются даже при нажатии кнопок).

var tableName = '<?php echo $tableName; ?>' 
$.ajax({ 
    url: "../../companies/charts/Data.php", 
    data: {id: escape(tableName)}, 
    dataType: "json", 
    async: false, 
    succes: function(data) { 
    chartOptions.chart1.xAxis.categories = json[0]['data']; 
    chartOptions.chart1.series[0].data = json[6]['data']; 
    } 
}); 

Заранее благодарим за любую помощь!

Answer 1

Если вы используете ajax, я полагаю, нет необходимости устанавливать для свойства async значение false. Кроме того, похоже, что у вас был неправильный успех при вызове ajax.

Просто объявите всю свою инициализацию с высокой скоростью, когда ваш вызов ajax вернул успех. Таким образом, в основном, метод ajax поверх вашей инициализации с высокой скоростью.