javascript - Highmaps 多个系列不禁用一个就看不到

Question

我有 2 个系列，如下所示。

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tr/tr-all.js"></script>

<div id="container"></div>


$(function () {

   Highcharts.mapChart('container', {
        chart: {
            spacingBottom: 20
        },
        title: {
            text: 'Multiple Map Series'
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            map: {
                allAreas: true,
               // joinBy: 'code',
                mapData: Highcharts.maps['countries/tr/tr-all'],
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{series.name}-{point.name}: <b>{point.value}</b>'
                }

            }
        },

        series:  [{
            name: 'AAA',
            data: $.map(['tr-an','tr-iz'], function (code) {
                return { "hc-key": code , value : 150};
            })
        },
        {
            name: 'BBB',
            data: $.map(['tr-ib','tr-or'], function (code) {
                return {  "hc-key": code , value : 122};
            })
        }
        ]
    });
});

jsfiddle 在这里； http://jsfiddle.net/usrt1Lrr/5/

first serie(AAA) 包含 2 个城市 'tr-an' 和 'tr-iz'。

second serie(BBB) 包含 2 个城市 'tr-ib' 和 'tr-or'。

除非我通过图例禁用一个系列，否则无法看到 2 个系列。如果禁用 BBB 系列； AAA 将可见。这没有意义。

我该如何解决这个问题？所有系列必须一起看

提前致谢。

Answer 1

既然你有plotOptions.map.allAreas: true它绘制了两个系列的所有区域，这意味着系列绘制在彼此之上(隐藏下面系列的颜色)。

另一种方法是让您选择:

plotOptions: {
    map: {
        allAreas: false,
        // ...
    }
}

然后添加一个隐藏的“背景”系列，如下所示:

series:  [{
        allAreas: true, // only show all areas for this series (as a "background")
        showInLegend: false // hide it from the legend
    },
    {
        name: 'AAA',
        data: $.map(['tr-an','tr-iz'], function (code) {
            return { "hc-key": code , value : 150};
        })
    },
    {
        name: 'BBB',
        data: $.map(['tr-ib','tr-or'], function (code) {
            return {  "hc-key": code , value : 122};
        })
    }]

参见 this JSFiddle demonstration它在行动。