javascript - JQVMap - How to show data values onregionclick - Stack Overflow

admin管理员组

文章数量:1398822

var setMap = function (name) {
        var data = {
            map: 'world_en',
            backgroundColor: null,
            borderColor: '#333333',
            borderOpacity: 0.5,
            borderWidth: 1,
            color: '#c6c6c6',
            enableZoom: true,
            hoverColor: '#c9dfaf',
            hoverOpacity: null,
            values: sample_data,
            normalizeFunction: 'linear',
            scaleColors: ['#b6da93', '#909cae'],
            selectedColor: '#c9dfaf',
            selectedRegion: null,
            showTooltip: true,
            onLabelShow: function (event, label, code) {

            },
            onRegionOver: function (event, code) {
                if (code == 'ca') {
                    event.preventDefault();
                }
            },
            onRegionClick: function (element, code, region) {
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
                alert(message);
            }
        };

        data.map = name + '_en';
        var map = jQuery('#vmap_' + name);
        map.width(map.parent().parent().width());
        map.show();
        map.vectorMap(data);
        map.hide();
    }

Anyone knows how to use the values of the clicked region in the onRegionClick function? I use this map to provide website statistics and want to alert on click something like "1000 Views in US (United States)"

var setMap = function (name) {
        var data = {
            map: 'world_en',
            backgroundColor: null,
            borderColor: '#333333',
            borderOpacity: 0.5,
            borderWidth: 1,
            color: '#c6c6c6',
            enableZoom: true,
            hoverColor: '#c9dfaf',
            hoverOpacity: null,
            values: sample_data,
            normalizeFunction: 'linear',
            scaleColors: ['#b6da93', '#909cae'],
            selectedColor: '#c9dfaf',
            selectedRegion: null,
            showTooltip: true,
            onLabelShow: function (event, label, code) {

            },
            onRegionOver: function (event, code) {
                if (code == 'ca') {
                    event.preventDefault();
                }
            },
            onRegionClick: function (element, code, region) {
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
                alert(message);
            }
        };

        data.map = name + '_en';
        var map = jQuery('#vmap_' + name);
        map.width(map.parent().parent().width());
        map.show();
        map.vectorMap(data);
        map.hide();
    }

Anyone knows how to use the values of the clicked region in the onRegionClick function? I use this map to provide website statistics and want to alert on click something like "1000 Views in US (United States)"

• javascript
• jquery
• jqvmap

Share Improve this question Follow asked Feb 15, 2013 at 12:46 malifamalifa 8,16522 gold badges4444 silver badges5757 bronze badges 3

• already figured it out..thx anyway ;) – malifa Commented Feb 15, 2013 at 14:37
• And what was it ? the solution ? :) – Rad Commented Apr 9, 2013 at 21:43
• i just posted my answer. hope it helps. – malifa Commented Apr 10, 2013 at 23:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

As i said in my ment, i found out the solution right after i asked the question, but for those who have this little problem, too i just post my solution. You just have to append the string you want to display to the label.

onLabelShow: function (event, label, code) {
    if(sample_data[code] > 0)
        label.append(': '+sample_data[code]+' Views'); 
}

hope it helps.

本文标签： javascriptJQVMapHow to show data values onregionclickStack Overflow