Question

我使用了jvector map

var colorData = {
 "1" : "#fcadb2", 
 "2" : "#0071A4",
 "3" : "#C8EEFF", 
 "4" : "#0071A4",
 "5" : "#C8EEFF", 
 "6" : "#0071A4"

}

$.getJSON ("<?php echo get_template_directory_uri(); ?>/map_data.php?id="+id+"",{},function(mapa){
    var dataC = eval(mapa);
    var countryData = []; 
    //for each country, set the code and value
    $.each(dataC.countries, function() {
        countryData[this.ccode] = this.visits;
    });
    //World map by jvectormap
    $('#world-map').vectorMap({
        map: 'world_mill',
        backgroundColor: "#fff",
        regionStyle: {
            initial: {
                fill: '#e4e4e4',
                "fill-opacity": 1,
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 1
            }
        },
        series: {
            regions: [{
                    values: countryData,
                    scale: colorData, //['#3E5E6B', '#A6BAC2'],
                    normalizeFunction: 'polynomial'
                }]
        },
        onRegionClick: function (event, code) {
            //alert(code);
            // highlight the countries
            highlight_lang(code);
        }
    });


});



    function highlight_lang(code) {

    var map = $('#world-map').vectorMap('get', 'mapObject');
    map.clearSelectedRegions();
    //clear the array values
    map.series.regions[0].clear();
    map.setSelectedRegions([code]);

}

在区域点击我调用了函数highlight_lang。通过使用此选项以外的区域被清除。默认情况下，单击该区域时会填充黄色。如何更改所选区域的颜色。

请帮帮我

Answer 1

在regionStyle属性中添加选定的属性，如下所示：

regionStyle: {
            initial: {
                fill: '#e4e4e4',
                "fill-opacity": 1,
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 1
            },
            selected:{
                 fill: "#2A3F52"
}

        },

如果它解决了这个问题，请告诉我。

jvector map设置区域上所选区域的颜色单击

1 个答案: