加入地区highmaps

问题描述 投票:1回答:2

我想做到的是加入/在Highmaps合并两个或多个区域。例如。说你要显示的人口为欧洲+亚洲,那么当你胡佛亚洲或欧洲,他们表现为与acumulated人口一个连接区域

我尝试以下,但没有成功:

var data = [
[['eu', 'as'], 0],
['af', 2],
['na', 4],
['sa', 5]];

随着小提琴:https://jsfiddle.net/2ek3mp1s/3/

有任何想法吗?

javascript highcharts
2个回答
1
投票

当然,一种选择是更改基础地理数据。但是,如果你不想这样做,你可以使其高亮显示在同一时间以相同价值的国家捏捏mouseOver事件。

这里有一个演示:

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
  ['eu', 0],
  ['as', 0],
  ['af', 2],
  ['na', 4],
  ['sa', 5]
];

// Create the chart
Highcharts.mapChart('container', {
  chart: {
    map: 'custom/world-continents'
  },

  title: {
    text: 'Highmaps basic demo'
  },

  plotOptions: {
    map: {
      point: {
        events: {
          mouseOver: function() {
            var v = this.value
            Highcharts.each(this.series.points, function(p) {
              if (v == p.value) {
                p.setState('hover')
              }
            });
          },
          mouseOut: function() {
            Highcharts.each(this.series.points, function(p) {
              p.setState('')
            });
          }
        }
      },
      allAreas: false,
    }
  },
  subtitle: {
    text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.js">World continents</a>'
  },

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

  colorAxis: {
    min: 0
  },

  series: [{
    data: data,
    name: 'Random data',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
  }]
})
<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/custom/world-continents.js"></script>

<div id="container"></div>

的jsfiddle:https://jsfiddle.net/user2314737/uhp2wgkn/

参见Highcharts "Categorized areas" demo


0
投票

不解决我的问题,准确,但找到了一种方法,以实现欧洲的类似。在这种情况下,我连接瑞典和芬兰("name": "path7025"):

http://jsfiddle.net/huqfkc2y/

通过添加各自的区域。案件被驳回。

© www.soinside.com 2019 - 2024. All rights reserved.