Question

我要完成的工作是在Highmaps中加入/合并两个或更多区域。例如。说您想显示欧洲+亚洲的人口，那么当您将亚洲或欧洲悬停时，它们会显示为人口总数的一个关联区域

我尝试了以下操作，但没有成功：

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

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

有什么想法吗？

Answer 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

Answer 2

无法解决我的确切问题，但是找到了在欧洲实现类似目标的方法。在这种情况下，我将连接瑞典和芬兰（"name": "path7025"）：

http://jsfiddle.net/huqfkc2y/

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

加入区域高图

2 个答案: