javascript - 如何将自定义 JSON 数据加载到 Highcharts mapbubble 中?
问题描述
我有一个由字段组成的 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 系列代码以满足我的要求。寻求帮助。谢谢!
解决方案
您必须使用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>
演示:
API参考: