我的Highcharts地图有一个小问题。我设法让它绘制我想要的数据，甚至包括一个选择器，以便用户可以调整显示的数据系列。但是，似乎在渲染一个特定系列之后，Map会将数据对象附加到我没有数据的美国领域的每个系列。我最大的系列有53个数据对象（美国加上DC，波多黎各，维尔京群岛）但是在渲染之后，系列出现了62个结构，包括那些我没有数据的结构（圣约翰，塞班岛等） 。这导致我用于将状态代码更改为此映射所需的hc-key格式的代码片段出现问题。虽然我可以为该函数添加一些额外的检查，但我想了解为什么Highcharts将数据添加到我的数据结构中。非常感激任何的帮助。我的Javascript代码如下：
<script type="text/javascript">
var states ={resStates: [{code: "AK",value:3},{code: "AL",value:49},{code: "AR",value:9},{code: "AZ",value:28},{code: "CA",value:170},{code: "CO",value:26},{code: "CT",value:12},{code: "DC",value:10},{code: "DE",value:5},{code: "FL",value:126},{code: "GA",value:51},{code: "HI",value:7},{code: "IA",value:5},{code: "ID",value:13},{code: "IL",value:31},{code: "IN",value:28},{code: "KS",value:15},{code: "KY",value:12},{code: "LA",value:17},{code: "MA",value:54},{code: "MD",value:124},{code: "ME",value:13},{code: "MI",value:60},{code: "MN",value:8},{code: "MO",value:19},{code: "MS",value:16},{code: "MT",value:6},{code: "NC",value:43},{code: "ND",value:3},{code: "NE",value:10},{code: "NH",value:14},{code: "NJ",value:72},{code: "NM",value:35},{code: "NV",value:7},{code: "NY",value:70},{code: "OH",value:84},{code: "OK",value:23},{code: "OR",value:11},{code: "PA",value:101},{code: "PR",value:2},{code: "RI",value:20},{code: "SC",value:26},{code: "SD",value:5},{code: "TN",value:19},{code: "TX",value:91},{code: "UT",value:67},{code: "VA",value:112},{code: "VI",value:1},{code: "VT",value:1},{code: "WA",value:29},{code: "WI",value:13},{code: "WV",value:2},{code: "WY",value:4}],
acadStates: [{code: "AK",value:1},{code: "AL",value:47},{code: "AR",value:12},{code: "AZ",value:31},{code: "CA",value:163},{code: "CO",value:34},{code: "CT",value:9},{code: "DC",value:18},{code: "DE",value:7},{code: "FL",value:121},{code: "GA",value:80},{code: "HI",value:6},{code: "IA",value:9},{code: "ID",value:9},{code: "IL",value:29},{code: "IN",value:55},{code: "KS",value:16},{code: "KY",value:8},{code: "LA",value:14},{code: "MA",value:65},{code: "MD",value:81},{code: "ME",value:8},{code: "MI",value:66},{code: "MN",value:7},{code: "MO",value:20},{code: "MS",value:13},{code: "MT",value:4},{code: "NB",value:1},{code: "NC",value:53},{code: "ND",value:4},{code: "NE",value:8},{code: "NH",value:13},{code: "NJ",value:32},{code: "NM",value:32},{code: "NV",value:4},{code: "NY",value:93},{code: "OH",value:83},{code: "OK",value:25},{code: "OR",value:7},{code: "PA",value:123},{code: "PR",value:2},{code: "RI",value:15},{code: "SC",value:17},{code: "SD",value:4},{code: "TN",value:9},{code: "TX",value:103},{code: "UT",value:62},{code: "VA",value:114},{code: "VT",value:2},{code: "WA",value:27},{code: "WI",value:19},{code: "WV",value:4},{code: "WY",value:4}],
empStates: [{code: "AK",value:2},{code: "AL",value:71},{code: "AR",value:4},{code: "AZ",value:12},{code: "CA",value:235},{code: "CO",value:1},{code: "DC",value:36},{code: "FL",value:104},{code: "GA",value:70},{code: "HI",value:5},{code: "IL",value:17},{code: "IN",value:18},{code: "KS",value:14},{code: "LA",value:5},{code: "MA",value:61},{code: "MD",value:244},{code: "MI",value:39},{code: "MN",value:3},{code: "MO",value:4},{code: "MS",value:64},{code: "NC",value:22},{code: "NE",value:2},{code: "NH",value:20},{code: "NJ",value:62},{code: "NM",value:95},{code: "NY",value:22},{code: "OH",value:133},{code: "OK",value:53},{code: "OR",value:7},{code: "PA",value:38},{code: "RI",value:37},{code: "SC",value:26},{code: "TN",value:9},{code: "TX",value:22},{code: "UT",value:75},{code: "VA",value:126},{code: "WA",value:22},{code: "WV",value:2}]};
$(init)
function init() {
drawMap();
}
function drawMap() {
var map_select = $('#smartStates').val();
var map_text = $('#smartStates option:selected').text();
var mydata = states[map_select];
var mycolors = {resStates: {
min: 1,
type: 'linear',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
}, acadStates: {
min: 1,
type: 'linear',
minColor: '#FFEEEE',
maxColor: '#220000',
stops: [
[0, '#FFFFEE'],
[0.67, '#FF4444'],
[1, '#220000']
]
}, empStates: {
min: 1,
type: 'linear',
minColor: '#EEFFEE',
maxColor: '#002200',
stops: [
[0, '#EEFFEE'],
[0.67, '#44FF44'],
[1, '#002200']
]
}
}
// Adjusting codes to fit with the us-all-territories map
$.each(mydata, function(){ //looping through each instance of mydata
if (this.code == "PR") {
this.code = "pr-3614";
} else if (this.code == "undefined"){
//not sure what to do here
}
else if (this.code.length==2) {
this.code = "us-" + this.code.toLowerCase();
}
});
// Instanciate the map
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title : {
text : 'SMART Participant Counts by ' + map_text
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: mycolors[map_select],
series : [{
animation: {
duration: 1000
},
data : mydata,
mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
joinBy: ['hc-key', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.name}'
},
name: 'SMART Participants',
tooltip: {
pointFormat: '{point.name}: {point.value} participants'
}
}]
});
}
</script>
答案 0 :(得分：1)
这是因为在mapData属性中你有这个：
mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
我们 - 所有地区，但正如您所说，您没有所有地区的数据。
解决方案是使用来自Highcharts的不同自定义地图，不幸的是，它们看起来不像只有您正在寻找的美国地区。
更新：由 Kacper 提及的评论提到：如果将allAreas系列设置为false，则不会显示空地图区域。示例：http://jsfiddle.net/oen00hec/