我正在使用Highmaps来显示每个国家/地区的相关用户数量。然后应该以渐变显示,以便来自一个国家的用户越多,颜色越深。我让它在Highmaps中运行以便加载数据,但由于某种原因,它显示所有黑色国家,尽管渐变图例是白色到蓝色。知道为什么会这样吗?谢谢!
$(document).ready(function(){
// Basic highcharts initialization
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
var analytics_map = new AnalyticsMap('#container');
analytics_map.setTitle('# of Signups');
analytics_map.load([
["AE","31"],
["AR","51"],
["AT","71"],
["AU","81"],
["BE","91"],
["BG","9"],
["BO","22"],
["BR","37"],
["US","173"],
["UY","5"],
["ZA","19"]
]);
function AnalyticsMap(selector){
this.selector = selector,
this.title = 'Default Title',
this.setTitle = function (title){
this.title = title;
},
this.load = function(data){
$(this.selector).highcharts('Map', {
title: {
text: this.title
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 0],
keys: ['iso-a2', 'value'],
name: this.title,
dataLabels: {
//enabled: true,
//format: '{point.code}'
},
tooltip: {
pointFormat: '{point.iso-a2}: {point.value} signups'
}
}]
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
答案 0 :(得分:2)
您遇到数据类型问题。
不要通过在它们周围加上引号将整数转换为字符串。
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];