使用按钮更改 JVectorMap 中的区域颜色答案

【问题标题】：Changing Region Colors in JVectorMap with a Button使用按钮更改 JVectorMap 中的区域颜色
【发布时间】：2015-01-30 22:40:22
【问题描述】：

我是 jvectormap 的新手，但发现它很棒。

我创建了一个具有以下特征的地图。当地图加载时，大约 30 个国家应用了颜色，红色、黄色或绿色，基于与该国家相关的一些分数（例如杜兰杜兰球迷的人口百分比）。其他国家只是灰色的。（彩色区域有一些交互性，如工具提示和点击。）第一次创建地图时，末尾有一条线：

map.series.regions[0].setValues(getColors(currentColor);

并且 currentColor 之前已定义：

var currentColor = "[ALL]";

这样所有颜色（红色、黄色和绿色）都会显示在地图上，这样就可以了。

在地图下方，我想提供按钮以仅显示给定颜色的国家/地区，例如红色国家/地区。当点击红色按钮时，只有红色的国家会显示为红色，其他国家显示为灰色。每种颜色都有自己的按钮。

这似乎很容易做到。我已经看到这里使用的技术：http://jvectormap.com/examples/random-colors/，您可以在其中单击以随机更改颜色，并且地图的其他所有内容（平移、缩放等）保持不变。关键部分是：

map.series.regions[0].setValues(generateColors());

当你有一个地图构造函数时：

map = new jvm.Map({

（如果你的地图构造函数是这样的：

$('#map').vectorMap({

那么你需要做这样的事情：

var mapObject = $('#map').vectorMap('get', 'mapObject');
mapObject.series.regions[0].setValues(generateColors());

)

我已经尝试做到这一点，但使用我自己的 getColors(color) 方法：

map.series.regions[0].setValues(getColors(currentColor));

在这里我重新生成了传递给 setValues() 的地图颜色数组，但地图没有变化。我知道地图颜色数组是正确的，因为我的解决方法是在按下按钮时执行以下操作：

(1) 改变 currentColor 变量 (2)清空地图div容器：$("#map").empty() (3) 使用构造函数和对map.series.regions[0].setValues(getColors(currentColor))的调用从头开始重绘地图；

这种方法的缺点是，从头开始重新绘制地图时，任何平移或缩放都会丢失。当我调用时，我是否缺少任何步骤来更新地图：map.series.regions[0].setValues()

这里有一个 jsfiddle 显示它是如何工作的，除非你从头开始重新绘制地图：http://jsfiddle.net/msalamon/euqyfs7v/10/

在 jsfiddle 中，如果您调用“High Redraw”，它只会显示红色国家，但只能通过重绘来显示。

【问题讨论】：

标签： jvectormap

【解决方案1】：

我想通了。请参阅：http://jsfiddle.net/msalamon/euqyfs7v/11/。

我假设 setValues() 完全替换了先前的值，因此任何缺失的值都设置为默认值。但是 setValues() 仅替换其中包含的值。因此，当使用按钮选择特定颜色/级别时，我已对其进行了更改，以便返回的数组包含未包含的任何区域的默认值：

        else
        {
            colors[code] = "#999999";                
        }

【讨论】：

还有另一种方法。请参阅：jsfiddle.net/msalamon/euqyfs7v/12。而不是上面的更改，首先调用 map.series.regions[0].clear();然后获取颜色数组，其中包含您感兴趣的区域的颜色。所有其他区域将获得默认颜色。

【解决方案2】：

这段代码对我有用，你只需要改变值，:)

<button id="update-colors-button2">change </button>
<button id="update-colors-button">change </button>


<div id="world-map" style="width: 600px; height: 400px"></div>


<script type="text/javascript">
map = new jvm.WorldMap({
    map: 'chile',
    container: $('#world-map'),
    series: {
        regions: [{
            attribute: 'fill'
        }]
    }
});
$(function(){

  $('#update-colors-button').click(function(e){
    e.preventDefault();
    map.series.regions[0].clear();
   map.series.regions[0].setValues({'ari' : '#328942'});
  });

 $('#update-colors-button2').click(function(e){
    e.preventDefault();
    map.series.regions[0].clear();
   map.series.regions[0].setValues({'ata' : '#328942'});

  });


})

</script>

【讨论】：