jvectormap region colors

问题

Im using the jvectormap plugin, and I am trying to set the colors of each of the regions on the map. However, after applying the code below the map is displayed but with no colours applied. It just shows the map in white.

I have read multiple examples and questions on this matter, but I cant seem to get it to work for me.

Example 1 of setting random colours on a map.

Documentation

Similar question to mine, however it doesn't solve my problem.

jQuery('#mapDiv').vectorMap({
    map: 'au_merc_en',
    backgroundColor: 'none',
    colors: {
        AU-SA: '#4E7387',
        AU-WA:'#333333',
        AU-VIC:'#89AFBF',
        AU-TAS:'#817F8E',
        AU-QLD:'#344B5E',
        AU-NSW:'#344B5E',
        AU-ACT:'#344B5E',
        AU-NT:'#344B5E'

    },
    series: {
      regions: 
      [{
        attribute: 'fill'
      }]
    }
});

Can anyone see the problem?

回答1:

Here is a working sample of what I think you're attempting to do.

http://jsfiddle.net/3xZ28/34/

(function() {
    var myCustomColors = {
        'AU-SA': '#4E7387',
        'AU-WA': '#333333',
        'AU-VIC': '#89AFBF',
        'AU-TAS': '#817F8E',
        'AU-QLD': '#344B5E',
        'AU-NSW': '#344B5E',
        'AU-ACT': '#344B5E',
        'AU-NT': '#344B5E'
    };

    map = new jvm.WorldMap({
        map: 'au_merc_en',
        container: $('#ausie'),
        backgroundColor: '#eff7ff',
        series: {
            regions: [{
                attribute: 'fill'
            }]
        }
    });

    map.series.regions[0].setValues(myCustomColors);
})();

This example builds off of two examples on the jvectormap site:
1. http://jvectormap.com/maps/countries/australia/
2. http://jvectormap.com/examples/random-colors/

The fiddle includes the jvectormap 1.1 file from the site. Also note the Random Colors example on the site uses jvm.WorldMap.

回答2:

The code below has been edited to fix the syntax errors in your posted code.

jQuery('#mapDiv').vectorMap({
    map: 'au_merc_en',
    backgroundColor: 'none',
    colors:{
        "AU-SA": '#4E7387',
        "AU-WA":'#333333',
        "AU-VIC":'#89AFBF',
        "AU-TAS":'#817F8E',
        "AU-QLD":'#344B5E',
        "AU-NSW":'#344B5E',
        "AU-ACT":'#344B5E',
        "AU-NT":'#344B5E'

    },
    series: {
      regions: 
      [{
        attribute: 'fill'
      }]
    }
});

Unbound (closest antonym of encapsulated I can muster) hyphens within object keys cause a syntax error. The error itself is for an invalid label.

来源：https://stackoverflow.com/questions/12867615/jvectormap-region-colors

标签

javascript

jquery

jquery-plugins

maps

jvectormap