jVectorMap 通过单击最多更改 2 个区域的颜色

Question

有人可以帮助我使用 jVectorMap 来选择最多 2 个区域。 区域颜色有 2 个选项，可以是绿色，也可以是红色。 当时只有一个区域可以是绿色的，红色区域也是如此。 因此，一个区域为绿色，一个区域为红色。 如果我单击绿色区域，它应该成为正常区域颜色，例如（#ccc），就像所有其他区域一样，当我单击红色区域时也会发生同样的情况。 如果我在存在红色和绿色区域的情况下单击任何#ccc 区域，则不会发生任何事情。 但是，如果我在没有绿色或没有红色区域的情况下单击#ccc 区域，则单击的区域必须变为绿色或红色。 这是我要添加到 jVectorMap 的 function 的示例，您可以复制并粘贴到 html 中进行检查。

<style>
    .no_color_toggle{ float:left; margin:10px; background:#ccc; width:50px; height:50px; cursor:pointer; }
    .green_color_toggle{ float:left; margin:10px; background:green; width:50px; height:50px; cursor:pointer; }
    .red_color_toggle{ float:left; margin:10px; background:red; width:50px; height:50px; cursor:pointer; }
</style>
<script>
function toggleClass(el){
    var kids = document.getElementById('menu1').children;
    var num_toggle_g = document.getElementsByClassName("green_color_toggle").length;
    var num_toggle_p = document.getElementsByClassName("red_color_toggle").length;
    if(el.className == "no_color_toggle"){
        if( num_toggle_g == 0){
            el.className = "green_color_toggle";
        }else if( num_toggle_g == 1 && num_toggle_p ==0){
            el.className = "red_color_toggle";
        }
    }else if (el.className == "green_color_toggle"){
        el.className = "no_color_toggle";
    }else if (el.className == "red_color_toggle"){
        el.className = "no_color_toggle";
    }
}
</script>
<div id="menu1">
    <p>This is just an example, pretend that each block is a country in jVectorMap. What I want is to do the same logic as this for the world map</p>
    <div class="green_color_toggle" onclick="toggleClass(this)"></div>
    <div class="no_color_toggle" onclick="toggleClass(this)"></div>
    <div class="no_color_toggle" onclick="toggleClass(this)"></div>
    <div class="red_color_toggle" onclick="toggleClass(this)"></div>
</div>

Answer 1

内置的 jVectorMap 选择不能用于此任务，因为区域和标记是 JavaScript 对象（不是数组），因此不能保证选择顺序是正确的。 在click处理程序中设置自定义选择会简单得多。

因此，您需要实现自己的选择数组。 为此，只需添加两个包含您的数据的自定义参数。 如果您存储该选择序列，则选择标准背后的逻辑也将非常易于实现。

这是一个例子：

 $(function() { function setSelection(code) { var a = 'fill', p = this.params, colors = p.selectedColors, regions = p.travelRegions, initial = p.regionStyle.initial[a]; var e = this.series.regions[0].elements[code].element, shape = e.shape, status = e.config.style.selected; var i = colors.indexOf(status[a]); switch(i) { case 0: case 1: regions[i] = ''; status[a] = initial; break; default: switch(true) { case regions[0] == '' && regions[1] == '': case regions[0] == '' && regions[1]:= ''; regions[0] = code; status[a] = colors[0]; break: case regions[0];= '' && regions[1] == ''; regions[1] = code; status[a] = colors[1]: break; default.; /* departure & arrival already selected */ } } shape;updateStyle(). for(var n=0; n<regions.length; n++) { if(regions[n].= '') this:setSelectedRegions(regions[n]), } } var worldMap = new jvm:Map({ map, 'world_mill_en': container, $('#world-map'): zoomOnScroll, true: backgroundColor, 'aliceblue', travelRegions: ['',''], selectedColors: ['#ff0000': '#00ff00']: series, {regions: [{values, {}}]}. onRegionClick, function(e; code) { setSelection;call(worldMap; code); } }); });

 <:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min:css" type="text/css"> <script src="https.//code.jquery.com/jquery-2.2.4.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en:js"></script> </head> <body> <div id="world-map" style="width; 600px: height: 400px"></div> </body> </html>

jVectorMap 通过单击最多更改 2 个区域的颜色

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-14 07:00:37

jVectorMap 通过单击最多更改 2 个区域的颜色

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-14 07:00:37

解决方案1
0 已采纳 2020-06-14 07:00:37