优化JavaScript DrillDown代码

Question

我在我的页面上有一个钻取地图，我想优化。现在，我正在加载每个“钻取”地图，即使它没有被点击。

Here是一个例子，它展示了当状态被点击时数据是如何加载的。

但这是我的代码，正如你所看到的，即使地图没有被点击，我也会加载所有的drilldown json。在我的例子中，我只有2个向下钻取选项，但在我的现实生活问题中，我有15个，所以它真的会让一切都变慢一点。

所以这是我的代码：

// get main map
$.getJSON('json/generate_json_main_map.php', function(data) {

    // get region 1 map
    $.getJSON('json/generate_json_region_1.php', function(first_region) {

        // get region 2 map
        $.getJSON('json/generate_json_region_2.php', function(second_region) {

            // Initiate the chart
            $('#interactive').highcharts('Map', {
                title: {
                    text: ''
                },
                colorAxis: {
                    min: 1,
                    max: 10,
                    minColor: '#8cbdee',
                    maxColor: '#1162B3',

                    type: 'logarithmic'
                },
                series: [{
                    data: data,
                    "type": 'map',
                    name: st_ponudb,
                    animation: {
                        duration: 1000
                    },
                    states: {
                        //highlight barva
                        hover: {
                            color: '#dd4814'
                        }
                    }
                }],
                drilldown: {
                    drillUpButton: {
                        relativeTo: 'plotBox',
                        position: {
                            x: 0,
                            y: 0
                        },
                        theme: {
                            fill: 'white',
                            'stroke-width': 0,
                            stroke: 'white',
                            r: 0,
                            states: {
                                hover: {
                                    fill: 'white'
                                },
                                select: {
                                    stroke: 'white',
                                    fill: 'white'
                                }
                            }
                        }
                    },
                    series: [{
                        id: 'a',
                        name: 'First',
                        joinBy: ['hc-key', 'code'],
                        type: 'map',
                        data: first_region,
                        point: {
                            events: {
                                click: function() {
                                    var key = this.key;
                                    location.href = key;
                                }
                            }
                        }
                    }, {
                        id: 'b',
                        name: 'Second',
                        joinBy: ['hc-key', 'code'],
                        type: 'map',
                        data: second_region,
                        point: {
                            events: {
                                click: function() {
                                    var key = this.key;
                                    location.href = key;
                                }
                            }
                        }
                    }]
                }
            });
        });
    });
});

来自generate_json_main_map.php的JSON：

[{"drilldown":"a","name":"region 1","value":"1","path":""},{"drilldown":"b","name":"region 2","value":"2","path":""}]

来自generate_json_region_1.php的JSON：

[{"name":"Place 1","key":"place.php?id=1","value":"1","path":""},{"name":"Place 2","key":"place.php?id=2","value":"2","path":""}]

这是我试图让ajax调用并行加载，但是map没有加载，我只得到了coloraxis。

$(function() {

        $.when($.getJSON('json/generate_json_main_map.php'), $.getJSON('json/generate_json_region_1.php'), $.getJSON('json/generate_json_region_2.php')).done(function(data,first_region,second_region){

                $('#interactive').highcharts('Map', {
                    title: {
                        text: ''
                    },
                    colorAxis: {
                        min: 1,
                        max: 10,
                        minColor: '#8cbdee',
                        maxColor: '#1162B3',

                        type: 'logarithmic'
                    },
                    series: [{
                        data: data,
                        "type": 'map',
                        name: st_ponudb,
                        animation: {
                            duration: 1000
                        },
                        states: {
                            hover: {
                                color: '#dd4814'
                            }
                        }
                    }],
                    drilldown: {
                        drillUpButton: {
                            relativeTo: 'plotBox',
                            position: {
                                x: 0,
                                y: 0
                            },
                            theme: {
                                fill: 'white',
                                'stroke-width': 0,
                                stroke: 'white',
                                r: 0,
                                states: {
                                    hover: {
                                        fill: 'white'
                                    },
                                    select: {
                                        stroke: 'white',
                                        fill: 'white'
                                    }
                                }
                            }
                        },
                        series: [{
                            id: 'a',
                            name: 'First',
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                            data: first_region,
                            point: {
                                events: {
                                    click: function() {
                                        var key = this.key;
                                        location.href = key;
                                    }
                                }
                            }
                        }, {
                            id: 'b',
                            name: 'Second',
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                            data: second_region,
                            point: {
                                events: {
                                    click: function() {
                                        var key = this.key;
                                        location.href = key;
                                    }
                                }
                            }
                        }]
                    }
                });
            });
        }); 

我可以看到jsons已加载，并且firebug没有显示JS错误。

Answer 1

如果您希望在单击时加载，则需要在click_event上调用状态数据(而不是在启动时)。

就像您的JSFiddle示例一样：

chart : {
        events: {
            drilldown: function (e) {
// Load you data
// show it with  chart.addSeriesAsDrilldown(e.point, {...});
            }
        }
}

或者像@Whymarrh建议的那样，你可以并行地加载它们(而不是一个接一个)，一旦它们都被检索出来，就可以计算你的地图。

有关如何在所有ajax调用完成后执行代码的示例，请参阅https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/。

Answer 2

按照以下方式加载地图数据时：

$.when(
    $.getJSON('json/generate_json_main_map.php'),
    $.getJSON('json/generate_json_region_1.php'),
    $.getJSON('json/generate_json_region_2.php')
).done(...);

其效果是这样的-当三个请求中的任何一个失败时，所有的承诺都将被拒绝，最终，您的地图永远不会被初始化。

一种更好的方法是独立请求所有数据，并按如下方式处理结果：

如果主数据请求失败，则无条件中止其他请求(如果主数据为non-existent).

• If
• 成功，则无需向下钻取，您可以在数据可用时继续初始化映射。不过，向下钻取数据的请求可能会成功，也可能不会成功(但半块面包总比没有好？)。假设一切顺利，那么在用户启动向下钻取操作的情况下，您将显示一条正在加载的消息，并最终在可用时添加向下钻取系列。

下面是我提供的方法的一个实现：

$(function () {        
    // immediately trigger requests for data
    var loadMainData = $.getJSON("json/generate_json_main_map.php");
    var loadRegionData = {
        "region-1-name": $.getJSON("json/generate_json_region_1.php"),
        "region-2-name": $.getJSON("json/generate_json_region_2.php")
    };

    // region drilldown options
    var regionalSeriesOptions = {
        "region-1-name": {
            id: 'a',
            name: 'First',
            joinBy: ['hc-key', 'code'],
            type: 'map',
            point: {
                events: {
                    click: function () {
                        var key = this.key;
                        location.href = key;
                    }
                }
            }
        },
        "region-2-name": {
            id: 'b',
            name: 'Second',
            joinBy: ['hc-key', 'code'],
            type: 'map',
            point: {
                events: {
                    click: function () {
                        var key = this.key;
                        location.href = key;
                    }
                }
            }
        },
        // ...
        "region-(n-1)-name": {
            // series options for region 'n-1'
        },
        "region-n-name": {
            // series options for region 'n'
        },
        "region-(n+1)-name": {
            // series options for region 'n+1'
        }
    };

    // main options
    var options = {
        title: {
            text: ""
        },
        series: [{
                type: "map",
                name: st_ponudb,
                animation: {
                    duration: 1000
                },
                states: {
                    hover: {
                        color: "#dd4814"
                    }
                }
            }],
        events: {
            drilldown: function (e) {
                var regionName, request, series, chart;

                if (e.seriesOptions) {
                    // drilldown data is already loaded for the currently
                    // selected region, so simply return
                    return;
                }

                regionName = e.point.name;
                request = loadRegionData[regionName];
                series = regionalSeriesOptions[regionName];
                chart = this;

                chart.showLoading("Loading data, please wait...");

                request.done(function (data) {
                    // series data has been loaded successfully
                    series.data = data;
                    chart.addSeriesAsDrilldown(e.point, series);
                });

                request.fail(function () {
                    if (loadMainData.readyState !== 4) {
                        // do you really want to cancel main request
                        // due to lack of drilldown data?
                        // Maybe half bread is better than none??
                        loadMainData.abort();
                    }
                });

                // whether success or fail, hide the loading UX notification
                request.always(chart.hideLoading);
            }
        },
        colorAxis: {
            min: 1,
            max: 10,
            minColor: '#8cbdee',
            maxColor: '#1162B3',
            type: 'logarithmic'
        },
        drilldown: {
            drillUpButton: {
                relativeTo: 'plotBox',
                position: {
                    x: 0,
                    y: 0
                },
                theme: {
                    fill: 'white',
                    'stroke-width': 0,
                    stroke: 'white',
                    r: 0,
                    states: {
                        hover: {
                            fill: 'white'
                        },
                        select: {
                            stroke: 'white',
                            fill: 'white'
                        }
                    }
                }
            },
            series: []
        }
    };

    loadMainData.done(function (data) {
        options.series[0].data = data;
        $("#interactive").highcharts("Map", options);
    }).fail(function () {
        Object.keys(loadRegionData).forEach(function (name) {
            // if primary data can't be fetched,
            // then there's no need for auxilliary data
            loadRegionData[name].abort();
        });
    });
});

由于我不了解您的代码的每一个细节，因此留给您去寻找一种方法来使其适合您的解决方案。