Highmaps Countries and Hover，点击链接

Question

正如这个话题所指出的，我想把国家组织起来，建立我自己的“领域”。它几乎成功了，但我不知道出了什么问题。

这是我的地图：http://jsfiddle.net/wiesson/oktajn6e --它主要是从示例中派生出来的，但是它不起作用。如果我设置为"allAreas“为假，这是可以的，但我想显示所有其他国家，也！

有什么想法吗？

$(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
                };
            }),
        }]
    });
});

Answer 1

这个解决方案应该解决您的问题：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“，我们可以简单地在第一个系列上呈现它，其中我们只显示完整的地图。