我有一个HighMaps美国县地图精美地显示在具有固定数据的网页上(在我的代码中名为tableResult)。这是一个jQuery网页的一部分,它根据用户从页面上的各种选择中选择的参数为美国各县着色。选择参数后,他们点击一个按钮,查看他们选择的最佳县(三种不同的颜色)。结果可能只是几个县或几百个。提交按钮正在调用一个Web服务,该服务返回一个格式如下的tableResult格式的字符串,但具有基于其选择的个性化值。所有这一切都很好!HighMaps如何使用jQuery更新数据
我很确定这是一个范围问题,但我不知道如何更新地图,每次用户更改他们的选择并激活提交按钮。现在,用户参数不受此之前所有的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代码,我有以下。
我很尴尬地说,我不知道如何填充tableResult值与从web服务返回的数据字符串。这里是一个调用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服务的结果。任何想法将不胜感激!
你能添加与您提交交易的JS点击?例如$(“#mySubmitButton”)。on(“click”,function(){//获取一些数据...}); – Icewine