하이 차트의 비동기 데이터 입력

Question

$ .getJSON 메소드를 사용하여 MySQL 데이터베이스에서 데이터를로드하고 있습니다. 모든 데이터는 하이 차트에 표시됩니다. 데이터 세트간에 변경하기 위해 사용자가 클릭 할 수있는 다양한 버튼이 있습니다. 내 문제는 페이지가 처음로드 될 때 차트가 항상 비어 있습니다. 데이터를 검색하는 데 사용하는 $ .getJSON 메서드가 비동기이기 때문에 이것이 가능하다는 것을 알았습니다. getJSON 메서드를 AJAX 메서드로 전환하여이 문제를 해결할 수 있는지 여부는 확실하지 않습니다. 나는 시도했지만 성공하지 못했습니다. 또는 문제가되는 버튼 클릭시 차트 데이터를 전환하는 자바 스크립트 함수인지 여부. 아래는 모든 코드입니다. 문제에 대한 책임이 있다고 생각되는 코드 단편은 아래에 나와 있습니다. 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 방식을 전환 시도 async가 AJAX 메소드 대신 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

아약스를 사용하는 경우 async 속성을 false로 설정할 필요가 없습니다. 또한 아약스 호출에서 잘못 철자 된 것처럼 보입니다.

ajax 호출이 성공을 리턴했을 때 모든 하이 차트 초기화를 선언하십시오. 그래서 기본적으로, 하이 챠트 초기화 위에 아약스 메소드가 있습니다.