Styl Regiony indywidualne w jvectormap

Question

SO,

Mam zwyczaj jVectorMap a ja udało się zmianę koloru regionów wykorzystujących ten kod z API jVectorMap:

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

Ale próbuję kontrolować właściwości wypełnienia/uniesienia dla każdego regionu mapy indywidualnie. Czy ktoś to zrobił lub ma pomysł, jak to osiągnąć? Przejrzałem interfejs API jVectorMap, ale bez skutku.

Marca

Answer 1

Po pierwsze, trzeba wiedzieć, kody regionów masz zmieniających. Otrzymujesz je z pliku mapy, którego używasz. Poniższy przykład dotyczy mapy USA.

Na zmianę wypełnienia, można dostosować regiony podczas tworzenia mapy:

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

Albo można dostosować je w locie (i „wartości” parametr powyżej nie byłoby to konieczne):

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

Answer 2

kładę niestandardową metodę w jQuery jvectormap-1.1.1.js

Sprawdź wszystkie skrypt w http://pastebin.com/MSt94XuH

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

Musisz się odniesienie do mapy:

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

i ustawić niestandardowego stylu dla każdego kraju:

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

Jeśli trzeba usunąć wszystkie style użyć:

map.clearSelectedRegions();