前にHighChartが作成されました$ .getJSON

Question

HighChartsを使用して、列、ドリルダウンシリーズ、および散布図を含むグラフを作成しています。私が抱えている問題は、$ .getJSON関数が正常に終了する前にHighChartが作成されていることです。私は他のいくつかの記事を見つけましたが、まだ2つの$ .getJSON関数が呼び出されていません。私が使用していますコード：

$(function() { 

    // Create the chart 
    var options = { 
     chart: { 
      renderTo: 'container_genomefraction', 
      type: 'column', 
      events: { 
       // Declare the events changing when the drilldown is activated 
       drilldown: function(options) { 
        this.yAxis[0].update({ 
         labels: { 
          format: '{value}' 
         }, 
         title: {text : "Gbp"} 
        }, false, false); 

        options.seriesOptions.dataLabels = { 
         format: '{point.y:.1f}' 
        }; 

        options.seriesOptions.tooltip = { 
         pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>' 
        }; 
       }, 
       // Declare the events changing when the drillup is activated 
       drillup: function() { 
        this.yAxis[0].update({ 
         labels: { 
          format: '{value}%' 
         }, 
         title: {text : "Percentages"} 
        }, false, false); 
       } 
      } 
     }, 
     title: { 
      text: 'Comparison' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: [{ 
      title: { 
       enabled: true, 
       text: 'Percentages', 
       style: { 
        fontWeight: 'normal' 
       } 
      }, 
      labels: { 
       format: '{value}%' 
      } 
     },{ 
      min: 0, 
      title :{ 
       text : 'input' 
      }, 
      labels: { 
       format : '{value}' 
      }, 
      opposite: true 

     }], 
     legend: { 
      enabled: false 
     }, 

     plotOptions: { 
      series: { 
       marker: { 
        fillColor: '#FFFFFF', 
        lineWidth: 2, 
        lineColor: null, // inherit from series 
        size : 50 
       }, 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        format: '{point.y:.1f}%' 
       } 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
      pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 

     }, 

     // Declare an empty series 
     series: [{ 
      name: '', 
      colorByPoint: true, 
      data: [] 
     }], 
     credits: { 
      enabled: false 
     }, 
     // Declare an empty drilldown series 
     drilldown: { 
      series: [{ 
       name : '', 
       id: '', 
       data: [] 
      }] 
     } 
    }; 
    // Your $.getJSON() request is now synchronous... 
    $.ajaxSetup({ 
     async: false 
    }); 

    // Get the input into one series 
    $.getJSON('/uploads/fraction.json', function (list) { 
     options.series = list; 

    }); 
    // Get the drilldown estimated and total size into one series 
    $.getJSON('/uploads/drilldown.json', function (list2) { 
     options.drilldown.series = list2; 
     var chart = new Highcharts.Chart(options); 
    }); 

    $.ajaxSetup({ 
     async: true 
    }); 
}); 

マイJSONsがフォーマットされています

fraction.json

[{"name":"1","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3}]},{"name":"input","dataLabels":"{enabled,false}","yAxis":1,"type":"scatter","data":[{"y":38,"name":1,"drilldown":1},{"y":"","name":2,"drilldown":2},{"y":27,"name":3,"drilldown":3}],"tooltip":{"headerFormat":"<span style='font-size:11px'>{series.name}<\/span><br>","pointFormat":"<span style='color:{point.color}'>{point.name}<\/span>: <b>{point.y}<\/b><br\/>"}}] 

drilldown.json

[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]}] 

ページがロードされると、グラフには以前の検索の値が表示され、ページをリロードすると正しいデータが表示されます。誰かが私を助けてくれますか？

Answer 1

は、このような最初のgetJSON成功コールバックで二getJSONメソッドを追加します。

//Get the genome fraction into one series 
$.getJSON('/uploads/fraction.json', function (list) { 
    options.series = list; 

    //Get the drilldown estimated and total genome size into one series 
    $.getJSON('/uploads/drilldown.json', function (list2) { 
     options.drilldown.series = list2; 
     var chart = new Highcharts.Chart(options); 
    }); 
});