Присоединяйтесь к регионам

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 Демо "Категоризованные области"

Answer 2

Не решаю мою точную проблему, но нашел способ добиться аналогичного для Европы.В этом случае я соединяю Швецию и Финляндию ("name": "path7025"):

http://jsfiddle.net/huqfkc2y/

, добавляя их соответствующий регион.Дело закрыто.