0

我正在使用HighmapsJSFiddle 上的以下示例:http: //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/maps/legend/padding-itemmargin/

Stackoverflow 要求我提交 JSFiddle 代码:

$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
    // Initiate the chart
    $('#container').highcharts('Map', {
        chart : {
            borderWidth : 1
        },
        title : {
            text : 'Legend padding and item margin'
        },
        mapNavigation: {
            enabled: true
        },
        legend: {
            title: {
                text: 'Individuals per km²'
            },
            align: 'left',
            verticalAlign: 'bottom',
            floating: true,
            layout: 'vertical',
            valueDecimals: 0,
            backgroundColor: 'rgba(255,255,255,0.9)',
            padding: 12,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            symbolRadius: 0,
            symbolHeight: 14,
            symbolWidth: 24
        },
        colorAxis: {
            dataClasses: [{
                to: 3,
                color: 'rgba(19,64,117,0.05)'
            }, {
                from: 3,
                to: 10,
                color: 'rgba(19,64,117,0.2)'
            }, {
                from: 10,
                to: 30,
                color: 'rgba(19,64,117,0.4)'
            }, {
                from: 30,
                to: 100,
                color: 'rgba(19,64,117,0.5)'
            }, {
                from: 100,
                to: 300,
                color: 'rgba(19,64,117,0.6)'
            }, {
                from: 300,
                to: 1000,
                color: 'rgba(19,64,117,0.8)'
            }, {
                from: 1000,
                color: 'rgba(19,64,117,1)'
            }]
        },

        series : [{
            data : data,
            mapData: Highcharts.maps['custom/world'],
            joinBy: ['iso-a2', 'code'],
            name: 'Population density',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            tooltip: {
                valueSuffix: '/km²'
            }
        }]
    });
});   
}); 

问题:

单击图例项时,与该范围相关的国家将从地图中删除。

但是,它会同时删除填充和边框。

即使国家已被移除,如何保持边界?

4

1 回答 1

0

复制mapData怎么办?像这样:http: //jsfiddle.net/gf6jorjm/

在性能方面不是最好的,但您现在有两个独立的地图。现在只需在第二张地图上禁用边框,以消除不必要的边框(重复)。

于 2014-08-25T11:36:33.467 回答