ハイチャートの非同期データ入力

Question

$ .getJSONメソッドを使用してMySQLデータベースからデータをロードしています。すべてのデータはハイチャートで表示されます。ユーザーがデータセット間で変更するためにクリックできるさまざまなボタンがあります。私の問題は、ページが最初に読み込まれると、グラフは常に空に読み込まれることです。私はこれがおそらくデータを取得するために使用している$ .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> 

下の2つのセグメントが問題に責任があるのか​​どうかので、特に私が疑問に思って：

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

私はANを使用してJSONの方法を切り替えることを試みました代わりにasyncをfalseに設定してAJAXメソッドを呼び出します。これは以下のとおりです（ボタンがクリックされてもデータが表示されなくなりました）。

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メソッド。