HighMaps 如何使用 jQuery 更新數據

Question

我有一個 HighMaps 美國縣地圖，在帶有固定數據的網頁上顯示得很漂亮（在下面的代碼中命名為 tableResult）。 這是 jQuery 網頁的一部分，該網頁根據用戶從頁面上的各種選項中選擇的參數為美國各縣着色。 在他們選擇參數后，他們點擊一個按鈕來查看他們選擇的最佳縣（三種不同的顏色）。 結果可能只是幾個縣或數百個。 提交按鈕正在調用一個 Web 服務，該服務返回一個字符串，其格式與下面的 tableResult 類似，但具有基於其選擇的個性化值。 所有這些都很好用！

我很確定這是一個范圍問題，但我無法弄清楚每次用戶更改他們的選擇並激活提交按鈕時如何更新地圖。 現在，用戶參數都是以這個開頭的 jQuery 控件：

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

接下來是幾個用戶輸入選擇控件，所有這些都可以工作，然后是我下面的 HighMaps 代碼。

我很尷尬地說我不知道​​如何用從 Web 服務返回的數據字符串填充 tableResult 值。 這是我調用 Web 服務的函數（並且 Web 服務正按照我的需要返回一個不錯的 JSON 字符串）：

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

下面是顯示地圖的 HighMaps 代碼（目前只有 tableResult 變量中的兩個固定縣作為占位符）。

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

我需要的是，每次用戶點擊提交按鈕時，都會使用 Web 服務的結果更新地圖。 任何想法將不勝感激！

Answer 1

更改事件添加到按鈕的方式（例如使用bind ）。 bind函數的第二個參數是包含附加參數（你的pk和rk ）的對象。 它看起來像這樣：

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

另外，請記住使用來自 ajax 的數據更新圖表：

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

例子：
http://jsfiddle.net/ay3jyrk1/

Answer 2

就像你說的，這可能是一個范圍問題。 檢查的一種方法是更改​​單擊功能以使用類似的功能。

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