svg - Highmaps 集团国家和悬停，点击点击链接

Question

正如主题所述，我想将国家分组以创建我自己的“区域”。它几乎可以工作，但我不知道出了什么问题。

这是我的地图： 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
                };
            }),
        }]
    });
});

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”，我们可以简单地在第一个系列上渲染它，我们只显示完整的地图。