javascript - 如何在 Highmaps 上相互叠加两种世界地图

Question

我是 highmaps/highcharts 的新手，并试图放置一个 map 应用程序，可以在同一张 map 上显示 2 种数据。一种是突出显示的国家/地区的形式(以红色显示)，另一种是气泡的形式(当前以黑色显示)。我面临的问题是，虽然第一个系列数据(红色区域)只是我的变量 data 中存在的国家/地区，但黑色气泡似乎无处不在，而不仅仅是变量 data 中的国家/地区。

我添加了以下 highcharts 脚本 -

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

这就是我的脚本的样子 -

function populateChart (data) {

// Initiate the chart
chart = $('#container').highcharts('Map', {

    chart: {
        // Edit chart spacing
        spacingBottom: 100,
        spacingTop: 100

    },

    title: {
        text: null
    },

    mapNavigation: {
        enabled: false
    },

    legend: {
        enabled: false
    },

    tooltip: {
        formatter: function () {

            return this.point.name;
        },
        shared: false
    },

    series: [{
        type: 'map',
        data: data,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        name: null,
        color: '#cb202d',
        states: {
            hover: {
                color: '#cb202d',
                style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '10px' },
            }
        },
        dataLabels: {
            enabled: false,
            color: '#FFFFFF',
            style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '17px' },
            format: '{point.value}'
        }
    },
    {
        type: 'mapbubble',
        name: null,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        data: data,
        minSize: 4,
        maxSize: '8%',
        animation: true,
        color: '#000000'
    }]
});

};

我进行了很多研究，但没有取得多大成功。如果有人能指出我正确的方向，我将不胜感激。提前致谢。

Answer 1

似乎数据在两个系列之间共享，并且系列内部对其进行了修改。避免这种情况的最佳方法可能是使用数据副本(每个系列一个副本)。

series: [{
        name: 'Country',
        joinBy: 'hc-key',
        color :'red',
        data: data.slice(),
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            formatter: function () {
                if (this.point.value) {
                    return this.point.name;
                }
            }
        }
    }, {
        type: 'mapbubble',
      data: data,
      joinBy: 'hc-key',
      minSize: 30,
      maxSize: 40,
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }]

示例:http://jsfiddle.net/1hnqjvqb/1/