Stil individuell Regionen in jvectormap

Question

SO,

Ich habe eine benutzerdefinierte jVectorMap bekam und ich habe bei der Veränderung der Farbe der Regionen mit diesem Code aus dem jVectorMap API gelungen:

regionStyle: { 
     initial: { 
     fill: '#5e7073', 
     "fill-opacity": 1, 
     stroke: 'none', 
     "stroke-width": 0, 
     "stroke-opacity": 1 
     }, 
     hover: { 
     fill: 'black' 
     }, 

Aber ich versuche, die fill/hover-Eigenschaften für jede Region der Karte einzeln zu steuern. Hat jemand das getan oder eine Vorstellung davon bekommen, wie es zu erreichen ist? Ich habe die API jVectorMap durchgesehen, aber ohne Erfolg.

Marca

Answer 1

Zuerst müssen Sie die Codes für die Regionen wissen Sie ändern. Sie erhalten diese aus der Map-Datei, die Sie verwenden. Das folgende Beispiel ist für die USA-Karte.

Für die Füllung zu ändern, können Sie die Regionen anpassen, wenn Sie die Karte erstellen:

regionStyle: { 
    //... 
}, 
series: { 
    regions: [{ 
     values: { 
      'US-CA': '#3e9d01', 
      'US-WA': '#4b93c1', 
      'US-TX': '#c1a14b' 
     }, 
     attribute: 'fill' 
    }] 
} 

Oder Sie könnten sie schnell anpassen (und die „Werte“ Parameter oben wäre nicht notwendig):

$(function(){ 
    var map = $('#map').vectorMap('get', 'mapObject'); 
    map.series.regions[0].setValues({ 
     'US-CA': '#3e9d01' 
    }); 
}); 

Answer 2

ich habe eine benutzerdefinierte Methode in der jquery-jvectormap-1.1.1.js

Check alle Skript in http://pastebin.com/MSt94XuH

setSelectedRegionStyle : function (r,c) { 
return this.regions[r].element.style.selected.fill = c; 
}, 

Sie müssen Bezug auf die Karte bekommen:

map = $("#world-map-gdp").vectorMap('get', 'mapObject'); 

und einen benutzerdefinierten Stil Set für jedes Land:

map.setSelectedRegionStyle('IT', '#b2c9cb'); 
map.setSelectedRegionStyle('AT', '#b2c9cb'); 
map.setSelectedRegionStyle('BE', '#b2c9cb'); 

Wenn Sie klar brauchen alle Arten verwenden:

map.clearSelectedRegions();