javascript - 优化 JavaScript DrillDown 代码

Question

我的页面上有一个向下钻取图，我想对其进行优化。现在我正在加载每个“向下钻取” map ，即使它没有被点击。

Here是一个示例，显示了单击状态时如何加载数据。我想实现这一点。

但这是我的代码，如您所见，即使未单击 map ，我也会加载所有向下钻取 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 没有加载，我只得到了色轴。

$(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 所建议的那样，您可以并行加载它们(而不是一个接一个地加载)，一旦它们都被检索到，就计算您的 map 。

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