Highmaps - 更改为mapbubble

时间:2018-05-19 09:43:29

标签: javascript highcharts bubble-chart highmaps

我一直试图通过添加
来将Highmaps图表更改为bubble 键入:'mapbubble',如下所示但失败了 有什么办法吗?我不知道哪里出了问题

series: [{
  type: 'mapbubble',
  data: data,

感谢是否有人可以根据以下代码帮助我做到这一点

链接到jsfiddle

   mapChart = Highcharts.mapChart('mapchart', {

        title: {
            text: 'Population history by country'
        },

        subtitle: {
            text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
         //  type: 'logarithmic',
            endOnTick: false,
            startOnTick: false,
            min: 50000
        },

        tooltip: {
            footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
        },

        series: [{
            data: data,
            mapData: mapData,
            joinBy: ['iso-a3', 'code3'],
            name: 'Current population',
            allowPointSelect: true,
            cursor: 'pointer',
            states: {
                select: {
                    color: '#a4edba',
                    borderColor: 'black',
                    dashStyle: 'shortdot'
                }
            }
        }]
    });

1 个答案:

答案 0 :(得分:1)

  1. point.value替换为point.z

    data.push({
      name: countries[code3].name,
      code3: code3,
      z: value,
      year: year
    });
    
  2. chart.map道具设为mapData:

    chart: {
      map: mapData
    },
    
  3. 创建一个新系列,它将成为气泡的背景图层。

    series: [{
      name: 'Countries',
      color: '#E0E0E0',
      enableMouseTracking: false
    },
    
  4. 将主要系列类型设置为mapbubble

    {
      data: data,
      type: 'mapbubble',
      ...
    
  5. 直播示例:https://jsfiddle.net/xf4tkec1/