我想做到的是加入/在Highmaps合并两个或多个区域。例如。说你要显示的人口为欧洲+亚洲,那么当你胡佛亚洲或欧洲,他们表现为与acumulated人口一个连接区域
我尝试以下,但没有成功:
var data = [
[['eu', 'as'], 0],
['af', 2],
['na', 4],
['sa', 5]];
随着小提琴:https://jsfiddle.net/2ek3mp1s/3/
有任何想法吗?
当然,一种选择是更改基础地理数据。但是,如果你不想这样做,你可以使其高亮显示在同一时间以相同价值的国家捏捏mouseOver
事件。
这里有一个演示:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['eu', 0],
['as', 0],
['af', 2],
['na', 4],
['sa', 5]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents'
},
title: {
text: 'Highmaps basic demo'
},
plotOptions: {
map: {
point: {
events: {
mouseOver: function() {
var v = this.value
Highcharts.each(this.series.points, function(p) {
if (v == p.value) {
p.setState('hover')
}
});
},
mouseOut: function() {
Highcharts.each(this.series.points, function(p) {
p.setState('')
});
}
}
},
allAreas: false,
}
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.js">World continents</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
})
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world-continents.js"></script>
<div id="container"></div>
的jsfiddle:https://jsfiddle.net/user2314737/uhp2wgkn/
参见Highcharts "Categorized areas" demo
不解决我的问题,准确,但找到了一种方法,以实现欧洲的类似。在这种情况下,我连接瑞典和芬兰("name": "path7025"
):
通过添加各自的区域。案件被驳回。