如何在 Highmaps 上叠加两种世界地图

Question

我是 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'
    }]
});

};

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

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/

如何在 Highmaps 上叠加两种世界地图

How to overlay two kinds of world maps over each other on Highmaps

javascript

graph

charts

highcharts

highmaps