在$ .getJSON

Question

我正在使用HighCharts制作包含列，向下钻取系列和散点图的图形。我遇到的问题是HighChart是在$ .getJSON函数成功激活之前创建的。我已经找到了其他几篇文章，但是还没有调用两个$ .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
    });
}); 

我的JSON格式化：

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