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

因爲我不知道你的代碼的每一個細節，它留給你找到一個方法來適應它到您的解決方案。