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

我是highmaps / highcharts的新手，并试图放置一个地图应用程序，使我可以在同一张地图上显示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'
    }]
});

};

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

最佳答案

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

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/

关于javascript - 如何在Highmaps上相互叠加两种世界 map ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40490244/