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/

第一系列（AAA）包含2个城市'tr-an'和'tr-iz'。

第二系列（BBB）包含2个城市'tr-ib'和'tr-or'。

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

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

提前致谢。

Answer 1

由于您已获得plotOptions.map.allAreas: true，因此它会绘制两个系列的所有区域，这意味着系列会在彼此之上绘制（隐藏下面系列的颜色）。

另一种方法是选择：

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

并添加＆＃34;背景＆＃34;你隐藏的系列，如下：

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。

Highmaps多个系列在没有禁用的情况下无法看到

1 个答案: