在世界jVectorMap上显示自定义区域标签

Question

我有一个 JSON 代码 A jvector Map WHich 如下：

[
{"Country":"Australia","CountryCode":"AU","persons":"5"}, 
{"Country":"Spain","CountryCode":"ES","persons":"2"}, 
{"Country":"India","CountryCode":"IN","persons":"8"}, 
{"Country":"Mexico","CountryCode":"MX","persons":"4"},
{"Country":"United States","CountryCode":"US","persons":"4"}
]

JVector 地图根据数据填充国家/地区的颜色，但其上的标签仅显示国家/地区名称。我想显示否。国家/地区标签上的人数：

这是我正在使用的脚本：

<script type="text/javascript">
var dataC = <?php echo $data ?>;
var countryData = {};
$.each(dataC, function() {
countryData[this.CountryCode] = this.persons;
countryData[this.persons] = this.persons;
});
$(function() {
$('#world-map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: countryData, //load the data
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'}]
},
onRegionLabelShow: function(e, el, code) {
//search through dataC to find the selected country by it's code
var country = $.grep(dataC.countryData, function(obj, index) {
return obj.CountryCode == code;
})[0]; //snag the first one
//only if selected country was found in dataC
el.html(el.html() + 
"<br/><b>Code: </b>" +country.countryCode + 
"<br/><b>Percent: </b>" + country.persons + 
"<br/><b>Country Name: </b>"+ country.Country);
}
});
});
</script>

我想要的只是显示没有。 彩色标签上的人数 如在 JSON 中

Answer 1

我正在使用这段代码来显示自定义信息：

onRegionTipShow: function(e, label, code){
//hovering disabled for disabled regions
if ( isCountryDisabled(code) )
{
e.preventDefault();
label.html( '<b>'+label.html()+' - test</b>');
return false;
}
var country = getCountryDetails(code);
if(country === undefined) {
label.html( '<b>'+label.html()+'</b>');
}else{
label.html( '<b>'+label.html()+' - '+country.en+'</b>');
}
}

您可以看到我有一些功能来检查国家/地区是否应该显示自定义标签。我还有一个功能来获取国家/地区的详细信息。

基本上你正在调用区域标签显示，我正在使用区域提示显示。但两者都应该有效。可能您传递了一些错误的数据，并且可能存在错误。尝试仅使用HTML(无变量)创建标签，以查看是否能够修改它，一旦您可以开始使用变量。