Question

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

我创建了一个具有以下特征的地图。当地图加载时，大约30个国家/地区应用了颜色，红色，黄色或绿色，基于与该国家相关的一些分数（如Duran Duran粉丝的人口百分比）。其他国家只是灰色的。（彩色区域有一些交互性，比如工具提示和点击。）首次创建地图时，最后会有一行：

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（颜色）方法：

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

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

（1）更改currentColor变量（2）清空map 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”，它只显示红色国家，但只能通过重绘。

Answer 1

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

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

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

Answer 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>

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

2 个答案: