Как загрузить пользовательские данные JSON в карту Highcharts?

Question

У меня есть массив json, состоящий из полей [{"id":"JP", "name":"Japan", "nodes":12, "percent":1.2, "ips":[...]}, {...}, {...}]

Я хотел бы просматривать узлы стран и проценты в пузыре на карте, используя Highcharts. Что-то очень похожее на https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-bubble/

Я загрузил этот JSON-файл в javascript, но я не могу понять, как настроить код серии HighCharts в соответствии с моими требованиями. Ищу помощи. Спасибо!

Answer 1

Вы должны связать свои данные с данными карты, используя свойство series.joinBy:

var data = [{
  id: "JP",
  name: "Japan",
  nodes: 12,
  percent: 1.2,
  ips: [],
  z: 100
}];

Highcharts.mapChart('container', {
  chart: {
    borderWidth: 1,
    map: 'custom/world'
  },

  title: {
    text: 'World population 2013 by country'
  },

  subtitle: {
    text: 'Demo of Highcharts map with bubbles'
  },

  legend: {
    enabled: false
  },

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

  series: [{
    name: 'Countries',
    color: '#E0E0E0',
    enableMouseTracking: false
  }, {
    type: 'mapbubble',
    name: 'Population 2016',
    joinBy: ['iso-a2', 'id'],
    data: data,
    minSize: 4,
    maxSize: '12%',
    tooltip: {
      pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
    }
  }]
});

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>

Демо:

• https://jsfiddle.net/BlackLabel/zjsxn6rp/

Ссылка API:

• https://api.highcharts.com/highmaps/series.mapbubble.joinBy