Svg Highmaps组国家/地区并悬停，点击链接

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

这是我的地图： 它主要来源于示例，但不起作用。如果我将“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
                };
            }),
        }]
    });
});

---

此解决方案可以解决您的问题：

但让我解释一下代码中发生了什么：

使用这两个系列，您可以创建包含所有区域的完整世界地图。因此，如果您同时激活两个系列，则第二个系列将涵盖完整的第一个系列

这意味着，蓝色区域被系列的两个灰色区域覆盖

我用这种方法解决了这个问题：

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

Nice，但国家本身就是悬停的焦点。有没有进一步的想法，如何禁用“国家重点”并只允许组悬停？只能集中单个点。系列上没有悬停事件。因此，您的方法似乎是正确的，但在某种程度上是有缺陷的。这里有一个可能与之相关的bug：谢谢，我已经通过使用其他库暂时解决了这个问题