Question

正如主题所述，我想将国家分组以创建我自己的＆＃34;区域＆＃34;。它几乎可以工作，但我不知道什么是错的。

这是我的地图：http://jsfiddle.net/wiesson/oktajn6e 它主要来自示例，但它不起作用。如果我设置＆＃34; allAreas＆＃34;是的，没关系，但我想展示所有其他国家！

有什么想法吗？

$(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/

但是，让我解释一下代码中会发生什么：

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

enter image description here

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

我设法通过这种方式解决了问题：

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

Highmaps Group Countries和Hover，点击链接

1 个答案: