Показать метку пользовательского региона на World jVectorMap

У меня есть код JSON для карты jvector, которая выглядит следующим образом:

[
 {"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


json php jvectormap
person Community    schedule 26.03.2019    source источник
comment
Я ничего не знаю о коде, но разве это не то, что делает часть внутри этого if? if (country != undefined) {   -  person Andreas    schedule 26.03.2019
comment
даже если я удалю оператор if, это не сработает.   -  person    schedule 26.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я использую этот фрагмент кода для отображения пользовательской информации:

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 (без переменных), чтобы увидеть, сможете ли вы изменить ее, как только вы это сделаете, вы можете начать играть с переменными.

person Dominik Franek    schedule 06.04.2019