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

Question

我有一个JVE代码，用于A jvector Map，如下所示：

[
 {"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 Map根据数据填充国家/地区的颜色，但其上的标签仅显示国家/地区名称。我想表明不。国家标签上的人员：

这是我正在使用的脚本：

<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>');
}
}

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

基本上你正在调用onRegionLabelShow，我正在使用onRegionTipShow。但两者都应该奏效。可能你传递了一些错误的数据，可能会有错误。尝试仅使用HTML（无变量）创建标签，看看是否能够修改它，一旦你可以开始使用变量。