HighMaps wie Daten mit jQuery zu aktualisieren

Question

Ich habe eine HighMaps US-County-Karte schön auf einer Webseite mit festen Daten angezeigt (die in meinem Code tableResult unten genannt wird). Dies ist Teil einer jQuery-Webseite, die US-Bundesstaaten basierend auf Parametern, die der Benutzer aus verschiedenen Optionen auf der Seite ausgewählt hat, einfärbt. Nachdem sie die Parameter ausgewählt haben, tippen sie auf eine Schaltfläche, um die besten Landkreise für ihre Auswahl zu sehen (in drei verschiedenen Farben). Die Ergebnisse könnten nur ein paar Grafschaften oder Hunderte sein. Die Schaltfläche "Senden" ruft einen Webdienst auf, der eine Zeichenfolge zurückgibt, die genau wie das folgende tabletResult formatiert ist, aber mit den personalisierten Werten auf der Grundlage ihrer Auswahl. All das funktioniert großartig!

Ich bin mir ziemlich sicher, dass es sich um ein Problem mit dem Oszilloskop handelt, aber ich kann nicht herausfinden, wie ich die Karte jedes Mal aktualisiere, wenn der Benutzer seine Auswahl ändert und die Übermittlungsschaltfläche aktiviert. Momentan sind die Anwenderparameter alle jQuery Kontrollen durch diese voran:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     alert("jQuery document ready"); 
     var e = jQuery(this).val(); 
     return e && (window.location = e), !1 
    }); 
</script> 

, die von mehreren Benutzereingabeauswahl Kontrollen gefolgt wird, werden alle Arbeiten, gefolgt und dann HighMaps Code Ich habe unten.

Es ist mir peinlich zu sagen, dass ich nicht herausfinden kann, wie Sie den tableResult-Wert mit der Datenfolge füllen, die vom Web-Service zurückkommt. Hier ist die Funktion, die ich habe, das ruft den Web-Service (und der Web-Service ist ein schönes JSON-String zurückkehren genauso wie ich will):

function GetCounties(pk, rk) { 
    jQuery.support.cors = true; 
    $.ajax({ 
     url: "http://www.mywebsite.com/api/products/2", 
     type: "GET", 
     dataType: "json", 
     success: function (d) { 
      data = JSON.stringify(d); 
      alert("API found data: " + JSON.stringify(d)); 
     }, 
     error: function (d) { 
      alert("API found error: " + JSON.stringify(d)); 
     } 
    }); 
} 

Unten ist der HighMaps Code, den die Karte anzeigt (derzeit nur mit der zwei feste Bezirke, die in der tableResult-Variablen als Platzhalter für jetzt sind).

$.noConflict(); 
    (function ($) { 
     // eliminate the following two lines when actual tableResult data is coming from table service 
     var tableResult = '[{"code":"us-al-001","name":"Autauga County, AL","value":1}, {"code":"us-il-019","name":"Champaign County, IL","value":3}]'; 
     data = JSON.parse(tableResult); 

     var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]); 
     var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline"); 

     // add state acronym for tooltip 
     Highcharts.each(countiesMap, function (mapPoint) { 
      var state = mapPoint.properties["hc-key"].substring(3, 5); 
      mapPoint.name = mapPoint.name + ", " + state.toUpperCase(); 
     }); 

     var options = { 
      chart: { 
       borderWidth: 1, 
       marginRight: 50 // for the legend 
      }, 

      exporting: { 
       enabled: false 
      }, 

      title: { 
       text: "My Best Locations" 
      }, 

      legend: { 
       layout: "vertical", 
       align: "right", 
       floating: true, 
       valueDecimals: 0, 
       valueSuffix: "", 
       backgroundColor: "white", 
       symbolRadius: 0, 
       symbolHeight: 0 
      }, 

      mapNavigation: { 
       enabled: false 
      }, 

      colorAxis: { 
       dataClasses: [{ 
        from: 1, 
        to: 1, 
        color: "#004400", 
        name: "Perfect!" 
       }, { 
        from: 2, 
        to: 2, 
        color: "#116611", 
        name: "Very Nice!" 
       }, { 
        from: 3, 
        to: 3, 
        color: "#55AA55", 
        name: "Good Fit" 
       }] 
      }, 

      tooltip: { 
       headerFormat: "", 
       formatter: function() { 
        str = "Error"; 
        if (this.point.value == 1) { 
         str = "Perfect!"; 
        } 
        if (this.point.value == 2) { 
         str = "Very Nice!"; 
        } 
        if (this.point.value == 3) { 
         str = "Good Fit"; 
        } 
        return this.point.name + ": <b>" + str + "</b>"; 
       } 
      }, 
      plotOptions: { 
       mapline: { 
        showInLegend: false, 
        enableMouseTracking: false 
       } 
      }, 

      series: [{ 
       mapData: countiesMap, 
       data: data, 
       joinBy: ["hc-key", "code"], 
       borderWidth: 1, 
       states: { 
        hover: { 
         color: "brown" 
        } 
       } 
      }, { 
       type: "mapline", 
       name: "State borders", 
       data: [lines[0]], 
       color: "black" 
      }] 
     }; 

     // Instanciate the map 
     $("#map-container").highcharts("Map", options); 
})(jQuery); 

Was ich brauche, ist für die Karte mit dem Ergebnis aus dem Web-Dienst aktualisiert wird jedes Mal, wenn der Benutzer die Submit-Button tippt. Irgendwelche Ideen würden sehr geschätzt werden!

Answer 1

ändern die Art und Weise Ereignis einer Schaltfläche hinzugefügt wird (zB bind verwenden). Der zweite Parameter der Funktion bind ist das Objekt, das zusätzliche Argumente enthält (Ihre pk und rk). Es kann wie folgt aussieht:

jQuery('.button').bind('click', { 
    pk: 'C4-7P4-6L3-5', 
    rk: 'H5F4M3B4T3' 
}, function(e) { 
    var data = e.data, 
    pk = data.pk, 
    rk = data.rk; 

    GetCounties(pk, rk); 
}); 

Denken Sie auch daran Diagramm mit Daten aus der Ajax zu aktualisieren:

$("#map-container").highcharts().series[0].update({ 
    data: JSON.parse(d) 
}); 

Beispiel:
http://jsfiddle.net/ay3jyrk1/

Answer 2

Es könnte ein Problem Bereich wie Sie sagen. Eine Möglichkeit, das zu überprüfen, besteht darin, die Klick-Funktion zu ändern, um so etwas zu verwenden.

$("body").on("click", ".button", function() { 
 
    // just some test variables, pass the correct values for pk rk however you need. 
 
    var pk = $("#pk").val(); 
 
    var rk = $("#rk").val(); 
 
    GetCounties(pk,rk); 
 
}); 
 

 
function GetCounties(pk, rk) { 
 
    // do something 
 
    console.log(pk, rk); 
 

 
    jQuery.support.cors = true; 
 
    $.ajax({ 
 
    url: "http://www.mywebsite.com/api/products/2", 
 
    type: "GET", 
 
    dataType: "json", 
 
    success: function(d) { 
 
     data = JSON.stringify(d); 
 
     alert("API found data: " + JSON.stringify(d)); 
 
    }, 
 
    error: function(d) { 
 
     alert("API found error: " + JSON.stringify(d)); 
 
    } 
 
    }); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
TEST pk:<input id="pk" type="text" value="C4-7P4-6L3-5"><br> 
 
TEST rk:<input id="rk" type="text" value="H5F4M3B4T3"> 
 
<br> 
 
<li><button class="button">Update Counties</button></li>