如何将自定义JSON数据加载到Highcharts mapbubble中?

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

我有一个由字段组成的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系列代码以适合我的要求。寻求帮助。谢谢!

javascript highcharts
1个回答
0
投票

您必须使用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>

Demo:

API参考:

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