[英]Change the colors of JvectorMap when there are 2 maps on the page
我正在使用Jvectormap在我的页面上放置2张地图。 地图放置正常,一切都很好。 它们被放置在2个不同的div中:
<div id="map1">
</div>
<div id="map2">
</div>
和Jquery:
$(function () {
$('#map1').vectorMap({
color: '#aaaaaa',
backgroundColor: '#ffffff',
hoverOpacity: 1,
hoverColor: true
});
});
$(function () {
$('#map2').vectorMap({
color: '#aaaaaa',
backgroundColor: '#ffffff',
hoverOpacity: 1,
});
});
现在,当我尝试使用以下方法动态更改map2的颜色时:
$("#map2").vectorMap("set", "colors", colorsDictionnary);
仅第一个的颜色会更改。
而且只有在更改颜色时才会发生这种情况。 即使我使用$("#map2")
总是第一个有颜色变化
如何在不触摸map1的情况下更改map2的颜色?
非常感谢您的帮助,我真的很需要
这样是否可以完成您想要做的事情?
这个答案是基于我在此处发布的一个问题的答案: jvectormap区域颜色
的JavaScript
(function() {
var myCustomColorsOne = {
'AU-SA': '#4E7387',
'AU-WA': '#333333',
'AU-VIC': '#89AFBF',
'AU-TAS': '#817F8E',
'AU-QLD': '#344B5E',
'AU-NSW': '#344B5E',
'AU-ACT': '#344B5E',
'AU-NT': '#344B5E'
};
var myCustomColorsTwo = {
'AU-SA': '#803300',
'AU-WA': '#993D00',
'AU-VIC': '#B24700',
'AU-TAS': '#CC5200',
'AU-QLD': '#E65C00',
'AU-NSW': '#FF7519',
'AU-ACT': '#FF8533',
'AU-NT': '#FFB280'
};
var myCustomColorsThree = {
'AU-SA': '#B8E186',
'AU-WA': '#B8E186',
'AU-VIC': '#B8E186',
'AU-TAS': '#B8E186',
'AU-QLD': '#B8E186',
'AU-NSW': '#B8E186',
'AU-ACT': '#B8E186',
'AU-NT': '#B8E186'
};
mapOne = new jvm.WorldMap({
map: 'au_merc_en',
container: $('#ausieOne'),
backgroundColor: '#EFF7FF',
series: {
regions: [{
attribute: 'fill'}]
}
});
mapTwo = new jvm.WorldMap({
map: 'au_merc_en',
container: $('#ausieTwo'),
backgroundColor: '#EFF7FF',
colors: '#3377CC',
regionStyle: {
initial: {
fill: '#B8E186'
}
},
series: {
regions: [{
attribute: 'fill'}]
}
});
mapOne.series.regions[0].setValues(myCustomColorsOne);
$("#color-changer").click(function() {
var $that = $(this);
if ($that.hasClass("green")) {
$that.removeClass("green");
mapTwo.series.regions[0].setValues(myCustomColorsTwo);
} else {
$that.addClass("green");
mapTwo.series.regions[0].setValues(myCustomColorsThree);
}
return false;
});
})();
的HTML
<a href="#" id="color-changer" class="green">Change colors of Map Two</a>
<p>Map One</p>
<div style="width: 354px; height: 300px" id="ausieOne" data-projection="mill" data-name="au_mill_en"></div>
<p>Map Two</p>
<div style="width: 354px; height: 300px" id="ausieTwo" data-projection="mill" data-name="au_mill_en"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.