0

トピックにあるように、国をグループ化して自分の「エリア」を作成したいと考えています。ほぼ動作しますが、何が悪いのかわかりません。

ここに私の地図があります: 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
                };
            }),
        }]
    });
});
4

1 に答える 1

2

この解決策はあなたの問題を解決するはずです: http://jsfiddle.net/oktajn6e/5/

しかし、あなたのコードで何が起こるかを説明させてください:

どちらのシリーズでも、すべてのエリアを含む完全な世界地図を作成できます。したがって、両方のシリーズを有効にすると、2 番目のシリーズが最初のシリーズ全体をカバーします。

ここに画像の説明を入力

ここに画像の説明を入力

つまり、青い領域がシリーズの 2 つの灰色の領域で覆われています。

私はこの方法でそれを解決することができました：

 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」を設定することで、完全なマップのみを表示する最初のシリーズで簡単にレンダリングできます。

于 2015-06-24T12:57:54.370 に答える