仅显示单个系列

Question

我使用了 highcharts 网站上的演示示例，唯一的修改是：

将地图更改为 world.js
评论了 "allAreas" 属性

$(function () {


    // Instanciate the map
    $('#container').highcharts('Map', {
        chart: {
            spacingBottom: 20
        },
        title : {
            text : 'Europe time zones'
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            map: {
                //allAreas: false,
                joinBy: ['iso-a2', 'code'],
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    formatter: function () {
                        if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                            return this.point.properties['iso-a2'];
                        }
                    },
                    format: null,
                    style: {
                        fontWeight: 'bold'
                    }
                },
                mapData: Highcharts.maps['custom/world'],
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.name}: <b>{series.name}</b>'
                }

            }
        },

        series : [{
            name: 'UTC',
            id: 'UTC',
            data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) {
                return { code: code };
            })
        }, {
            name: 'UTC + 1',
            data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
                    'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) {
                return { code: code };
            })
        }, {
            name: 'UTC + 2',
            data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) {
                return { code: code };
            })
        }, {
            name: 'UTC + 3',
            data: $.map(['RU'], function (code) {
                return { code: code };
            })
        }]
    });
});

JSFiddle中的代码为什么只有一个系列可见？

Answer 1

导致问题的行是这样的：//allAreas: false。

这是解释以及如何修复它(extract from the Highcharts support forum)

According to the API, setting allAreas to true will render all of the areas so also the one without value (as null value). Another option is the nullColor which by default is a shade of grey and sets the color to be used by null values.

Therefore if you set allAreas to true, then each series will draw all the areas and those with null values will be filled as grey (the nullColor). Because the later series have a higher z-index these are on top of the other series, resulting in a grey shape covering the shapes beneath it.

If you want to set allAreas to true but still see through the different series, you have to set the nullColor to transparent:

rgba(0,0,0,0)

Working JSFiddle here

仅显示单个系列

Only single series is shown

highmaps