我需要使用 highmaps 实现 mapbubble。我使用 qgis 为 map 生成了一个自定义 geojson 文件。
我提到了this例如，但我没有在 map 上看到气泡。即使我在控制台中也没有任何错误，除了:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Highmap</title>
</head>
<body>
<div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/maps/modules/offline-exporting.js"></script>
<script src='./data/custom-world.js'></script>
<script>
$.getJSON('./data/data.json', function (data) {
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', 'name'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.deposited}: [BTC]'
}
}]
});
});
</script>
</body>
</html>
data.json
[
{
"name" : "GB",
"deposited" : "5"
},
{
"name" : "RU",
"deposited" : "10"
},
{
"name" : "CH",
"deposited" : "3"
},
{
"name" : "IN",
"deposited" : "50"
}
]
custom-world.js
请从here下载此文件
现在的问题是，我得到了自定义 map ，但没有 map 气泡。
任何帮助将不胜感激，因为这些 Highcharts/ map 对我来说有点困惑。
最佳答案
代码看起来非常好。但是，问题似乎与您的 data.json 文件有关。您没有定义气泡的大小(z - 属性)。检查文档:https://api.highcharts.com/highmaps/series.mapbubble.data.z 。这就是气泡不可见的原因。
示例 data.json:
[
{
"name" : "GB",
"deposited" : "5",
"z": 1000
},
{
"name" : "RU",
"deposited" : "10",
"z": 1350
}
...
]
关于javascript - 如何使用qgis生成的自定义 map json在highmaps中实现mapbubble？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54572931/