Ottimizza JavaScript DrillDown code

Question

Ho una mappa di drilldown sulla mia pagina che vorrei ottimizzare. In questo momento sto caricando ogni mappa "drill down" anche se non è stata cliccata.

Here è un esempio che mostra come vengono caricati i dati se si fa clic sullo stato. Mi piacerebbe farlo.

Ma questo è il mio codice e, come potete vedere, sto caricando tutti i js di drill down anche se non si fa clic sulla mappa. Nel mio esempio ho solo 2 opzioni di drilldown, ma nel mio problema di vita reale ce l'ho tipo 15 quindi rallenta davvero un po 'tutto.

Quindi questo è il mio codice:

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

JSON da generate_json_main_map.php:

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

JSON da generate_json_region_1.php:

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

questo è il mio tentativo di fare ajax chiama il carico in parallelo, ma la mappa non si sta caricando, ottengo solo il 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; 
            } 
           } 
          } 
         }] 
        } 
       }); 
      }); 
     }); 

Posso vedere che i json sono caricati e non vi è alcun errore JS mostrato da firebug.

Answer 1

Se si desidera caricare al clic, è necessario chiamare i dati di stato su click_event (e non all'avvio).

Proprio come il tuo esempio JSFiddle:

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

---

O come suggerisce @Whymarrh, tutti loro è possibile caricare in parallelo (invece che uno dopo l'altro) e una volta che sono tutti recuperati, calcolare la vostra carta geografica.

Vedere https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/ per esempio su come eseguire un codice dopo che tutte le chiamate ajax sono state completate.

Answer 2

Quando si caricano i dati della mappa come avete fatto, nel modo seguente:

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

L'effetto è questo - quando uno dei tre richieste falliscono, tutte le promesse saranno respinte e, in definitiva, la vostra mappa mai deve essere inizializzato

Un approccio migliore potrebbe essere quella di richiedere tutti i dati in modo indipendente, e gli esiti sarebbe stato gestito nel modo seguente:

• Se la richiesta per i dati principali non riesce, interrompere le altre richieste incondizionatamente (non ci sarebbe alcun bisogno per un drill down se i dati primari sono inesistenti).
• Se la richiesta per i dati principali ha esito positivo, è possibile procedere e inizializzare la mappa man mano che i dati diventano disponibili. La richiesta di dati di drill down può avere o meno esito positivo (ma metà del pane è meglio di niente?). Supponendo che tutto vada per il meglio, allora nel caso in cui l'utente avvii un'azione di drill-down, si visualizza un messaggio di caricamento e in ultimo si aggiunge la serie di drill down quando diventa disponibile.

Ecco un'implementazione del metodo che ho offerto:

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

Dal momento che non conosco ogni dettaglio del vostro codice, che resta per voi di trovare un modo per inserirlo nella vostra soluzione.