优化JavaScript DrillDown代码

Question

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

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

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

所以这是我的代码：

从generate_json_region_1.php

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

JSON：

// 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

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

这是我试图让阿贾克斯调用并行加载，但地图不加载，我只得到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被加载，并没有显示由萤火虫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(...); 

的效果是这样的 - 当任何三个请求失败，所有的承诺都将被拒绝，最终损害您的地图永远得到初始化。

一个更好的办法可以是独立请求所有的数据，结果将作如下处理：

• 如果主数据的请求失败，放弃其他请求无条件的（就没有必要如果主要数据不存在，则向下钻取）。
• 如果对主数据的请求成功，您可以继续并在数据可用时初始化地图。尽管（但是一半面包比没有一个更好），请求下钻数据可能会也可能不会成功。假设一切顺利，那么在用户启动向下钻取操作的情况下，您将显示一条加载消息，并在可用时最终添加向下钻取系列。

这是我提供的方法的实现：

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

因为我不知道你的代码的每一个细节，它留给你找到一个方法来适应它到您的解决方案。