Highmaps Group Countries and Hover, Follow link 点击
Highmaps Group Countries and Hover, Follow link on Click
如主题所述,我想将国家分组以创建我自己的 "areas"。它几乎可以工作,但我不知道出了什么问题。
这是我的地图:http://jsfiddle.net/wiesson/oktajn6e
它主要来自示例,但不起作用。如果我将 "allAreas" 设置为 false,没关系,但我也想显示所有其他国家!
有什么想法吗?
$(function () {
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 0
},
title: {
text: 'Group Hover'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: true,
joinBy: ['iso-a2', 'code'],
mapData: Highcharts.maps['custom/world']
},
series: {
states:{
normal: {
animation: false
}
},
point: {
events: {
mouseOver: function(){
var ser = this.series;
var data = ser.data;
$.each(data, function(){
this.setState("hover")
});
},
mouseOut: function(){
var ser = this.series;
var data = ser.data;
$.each(data, function(){
this.setState()
});
}
}
}
}
},
series: [{
name: 'Nordic Countries',
data: $.map(['IS', 'NO', 'SE', 'FI', 'DK'], function (code) {
return {
code: code
};
}),
}, {
name: 'Some of central Europe',
data: $.map(['DE', 'AT', 'GB', 'FR'], function (code) {
return {
code: code
};
}),
}]
});
});
此解决方案应该可以解决您的问题:http://jsfiddle.net/oktajn6e/5/
但让我解释一下您的代码中发生了什么:
通过这两个系列,您可以创建包含所有区域的完整世界地图。所以如果你激活两个系列,第二个系列覆盖完整的第一个系列。
这意味着,蓝色区域被系列的两个灰色区域覆盖。
我是这样解决的:
series: [{
allAreas: true,
mapData: Highcharts.maps['custom/world'],
showInLegend: false,
}, {
allAreas: false,
name: 'Nordic Countries',
joinBy: ['iso-a2', 'code'],
mapData: Highcharts.maps['custom/world'],
data: $.map(['IS', 'NO', 'SE', 'FI', 'DK'], function (code) {
return {
code: code
};
}),
}, {
allAreas: false,
name: 'Some of central Europe',
joinBy: ['iso-a2', 'code'],
mapData: Highcharts.maps['custom/world'],
data: $.map(['DE', 'AT', 'GB', 'FR'], function (code) {
return {
code: code
};
}),
}]
通过单独创建每个系列并设置 "allAreas:false" 我们可以简单地在第一个系列上渲染它,我们只显示完整的地图。
如主题所述,我想将国家分组以创建我自己的 "areas"。它几乎可以工作,但我不知道出了什么问题。
这是我的地图:http://jsfiddle.net/wiesson/oktajn6e 它主要来自示例,但不起作用。如果我将 "allAreas" 设置为 false,没关系,但我也想显示所有其他国家!
有什么想法吗?
$(function () {
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 0
},
title: {
text: 'Group Hover'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: true,
joinBy: ['iso-a2', 'code'],
mapData: Highcharts.maps['custom/world']
},
series: {
states:{
normal: {
animation: false
}
},
point: {
events: {
mouseOver: function(){
var ser = this.series;
var data = ser.data;
$.each(data, function(){
this.setState("hover")
});
},
mouseOut: function(){
var ser = this.series;
var data = ser.data;
$.each(data, function(){
this.setState()
});
}
}
}
}
},
series: [{
name: 'Nordic Countries',
data: $.map(['IS', 'NO', 'SE', 'FI', 'DK'], function (code) {
return {
code: code
};
}),
}, {
name: 'Some of central Europe',
data: $.map(['DE', 'AT', 'GB', 'FR'], function (code) {
return {
code: code
};
}),
}]
});
});
此解决方案应该可以解决您的问题:http://jsfiddle.net/oktajn6e/5/
但让我解释一下您的代码中发生了什么:
通过这两个系列,您可以创建包含所有区域的完整世界地图。所以如果你激活两个系列,第二个系列覆盖完整的第一个系列。
这意味着,蓝色区域被系列的两个灰色区域覆盖。
我是这样解决的:
series: [{
allAreas: true,
mapData: Highcharts.maps['custom/world'],
showInLegend: false,
}, {
allAreas: false,
name: 'Nordic Countries',
joinBy: ['iso-a2', 'code'],
mapData: Highcharts.maps['custom/world'],
data: $.map(['IS', 'NO', 'SE', 'FI', 'DK'], function (code) {
return {
code: code
};
}),
}, {
allAreas: false,
name: 'Some of central Europe',
joinBy: ['iso-a2', 'code'],
mapData: Highcharts.maps['custom/world'],
data: $.map(['DE', 'AT', 'GB', 'FR'], function (code) {
return {
code: code
};
}),
}]
通过单独创建每个系列并设置 "allAreas:false" 我们可以简单地在第一个系列上渲染它,我们只显示完整的地图。