HighMaps 如何使用 jQuery 更新数据

Question

I have a HighMaps US county map displaying beautifully on a webpage with fixed data (which is named tableResult in my code below). This is part of a jQuery web page that colors US counties based on parameters the user has chosen from various choices on the page. After they select the parameters, they tap a button to see the best counties for what they selected (in three different colors). The results could just be a couple of counties or hundreds. The submit button is calling a web service which returns a string formatted just like the tableResult below, but with the personalized values based on their selections. All of that is working great!

I'm pretty sure it is a scope issue, but I can't figure out how to update the map each time the user changes their selections and activates the submit button. Right now, the user parameters are all jQuery controls preceded by this:

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

That is followed by several user input selection controls, all working, followed and then HighMaps code I have below.

I'm embarrassed to say that I can't figure out how to fill the tableResult value with the data string that comes back from the web service. Here is the function that I have which calls the web service (and the web service is returning a nice JSON string just as I want):

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

Below is the HighMaps code that displays the map (currently with just the two fixed counties that are in the tableResult variable as placeholders for now).

    $.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);

What I need is for the map to be updated with the result from the web service every time that the user taps the submit button. Any ideas would be greatly appreciated!

Answer 1

Change the way event is added to a button (for example use bind ). The second parameter of the bind function is the object which contains additional arguments (your pk and rk ). It can looks like this:

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

Also, remember to update chart with data from the ajax:

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

Example:
http://jsfiddle.net/ay3jyrk1/

Answer 2

It might be a scope issue like you say. One way to check is to change the click function to use something like this.

 $("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>