HighMaps 如何使用 jQuery 更新数据

Question

我有一张 HighMaps 美国县地图，在网页上显示精美，数据固定（在我下面的代码中名为 tableResult）。这是 jQuery 网页的一部分，该网页根据用户从页面上的各种选项中选择的参数为美国各县着色。在他们 select 参数之后，他们点击一个按钮以查看他们 select 编辑的最佳县（三种不同颜色）。结果可能只是几个县或数百个县。提交按钮正在调用一个 Web 服务，该服务 returns 一个格式类似于下面的 tableResult 的字符串，但具有基于其 select 离子的个性化值。所有这些都很好用！

我很确定这是一个范围问题，但我无法弄清楚每次用户更改他们的 selection 并激活提交按钮时如何更新地图。现在，用户参数都是 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>

接下来是几个用户输入 selection 控件，所有这些都在工作，然后是我在下面的 HighMaps 代码。

不好意思地说，我不知道如何用从网络服务返回的数据字符串填充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);

我需要的是在每次用户点击提交按钮时使用网络服务的结果更新地图。任何想法将不胜感激！

Answer 1

这可能是你说的范围问题。一种检查方法是更改点击功能以使用类似的功能。

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

Answer 2

更改将事件添加到按钮的方式（例如使用 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/

HighMaps 如何使用 jQuery 更新数据

HighMaps how to update data using jQuery

jquery

highcharts

highmaps