Asynchrone Dateneingabe in Highcharts

Question

Ich lade Daten aus einer MySQL-Datenbank mit einer $ .getJSON-Methode. Alle Daten werden dann in Highcharts angezeigt. Es gibt verschiedene Schaltflächen, auf die der Benutzer klicken kann, um zwischen den Datensätzen zu wechseln. Mein Problem ist, dass wenn die Seite zum ersten Mal geladen wird, das Diagramm immer leer geladen wird. Ich habe herausgefunden, dass dies wahrscheinlich daran liegt, dass die $ .getJSON-Methode, die ich zum Abrufen der Daten verwende, asynchron ist. Ich bin mir nicht sicher, ob dies gelöst werden kann, indem man die Methode getJSON auf eine AJAX-Methode umstellt. Ich habe es versucht, aber es ist mir nicht gelungen. Oder, ob es meine Javascript-Funktion ist, um Diagrammdaten bei Tastenklicks zu wechseln, ist das Problem. Unten ist der ganze Code. Die Code-Fragmente, von denen ich denke, dass sie für das Problem verantwortlich sind, werden dann unten gezeigt. Ich weiß, dass Sie vielleicht eine JSFiddle wollen, aber da ich Datenbankdaten verwende, weiß ich jetzt, wie man das Problem richtig anzeigt.

<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> 

So speziell ich frage mich, ob der die beiden Segmente sind unten verantwortlich für das Problem:

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

oder

 $('#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(); 
     }); 

Ich habe versucht, durch die JSON-Methode wechseln sich als ein mit AJAX-Methode stattdessen mit async auf false festgelegt. Dies wird unten gezeigt (hat nicht funktioniert und es werden keine Daten angezeigt, auch wenn Sie auf die Schaltflächen klicken).

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

Vielen Dank im Voraus für jede Hilfe!

Answer 1

Wenn Sie Ajax verwenden, muss die Async-Eigenschaft nicht auf false festgelegt werden. Außerdem scheint es so, als hätten Sie Erfolg bei Ihrem Ajax-Aufruf verpasst.

Deklarieren Sie einfach Ihre Highchart-Initialisierung, wenn Ihr Ajax-Aufruf erfolgreich war. Also im Grunde, Ajax-Methode zusätzlich zu Ihrer Highchart-Initialisierung.