jquery - 在 jvectormap 中设置各个区域的样式

Question

所以，

我有一个自定义 jVectorMap，并且我已成功使用 jVectorMap API 中的以下代码更改了区域的颜色:

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

但我正在尝试单独控制 map 每个区域的填充/悬停属性。有没有人做过这个或知道如何实现它？我查看了 jVectorMap API 但无济于事。

马卡报

Answer 1

首先，您需要了解要更改的区域的代码。您可以从正在使用的 map 文件中获取这些信息。下面的示例适用于美国 map 。

要更改填充，您可以在创建 map 时自定义区域:

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

或者您可以即时自定义它们(并且上面的“values”参数不是必需的):

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