控制图用复选标记按钮

Question

我仍然在努力做到这一点：

http://jsfiddle.net/Vh79z/10/

正如你可以见式有一张地图和一个复选框即可。我想要复选标记框来控制国家的颜色。

例如：当选中（负载检查）时，我希望它在地图上突出显示某些国家/地区。如果未选中，则以不同的颜色显示它们。

  new jvm.WorldMap({ 
     map: 'world_mill_en', 
     container: $('#mymap'), 
     backgroundColor: '#314F73', 
     zoomMax: 40, 
     markers: markers, 
     markerStyle: { 
      initial: { 
       fill: '#ffffff' 
      } 
     }, 
     series: { 
      regions: [{ 
       scale: { 
        '1': '#B1C9C0', 
         '2': '#41a62a' 
       }, 
       attribute: 'fill', 
       values: data1['countriesvisited'] 
      }] 
     } 
    }); 
}); 
$(document).ready(function() { 
    $('#myForm').fancyfields(); 
    var mapObject = $('#mymap').jvm.WorldMap('get', 'mapObject'); 
    $("#Checkbox1").fancyfields("bind", "onCheckboxChange", function (input, isChecked) { 
     if (isChecked) { 
      console.log(mapObject.series.regions[0]); 
      mapObject.series.regions[0].setScale({ 
       '1': '#ffffff', 
        '2': '#000000' 
      }); 
     } else { 
      mapObject.series.regions[0].setScale({ 
       '1': '#000000', 
        '2': '#ffffff' 
      }); 
     } 
    }); 
}); 

因此，使用上面的代码：

在负荷将与所有负载： '1' 参数上对号国家COLOR＃B1C9C0 '2' 参数国家COLOR＃41A62A

： '1' 参数国家COLOR #FFFFFF '2' 参数国家颜色＃000000

上取消选择： '1' 参数国家的颜色＃000000 '2' 参数国家COLOR #FFFFFF

那么这就是我想要它做的。我不确定我是否从地图上正确地获取信息。

请帮忙！

Answer 1

编辑2

确定我固定的问题。这里是更新jsFiddle：http://jsfiddle.net/Vh79z/16/

问题是setScale方法没有被添加到OrdinalScale对象。当我们尝试在区域对象中设置比例时，这导致了一个错误。

这是一个错误，所以我只是自己添加了setScale方法。它看起来像这样：

jvm.OrdinalScale.prototype.setScale = function(scale) { 
    this.scale = scale; 
}; 

编辑1

这是基于你更新的代码更新的小提琴：http://jsfiddle.net/Vh79z/13/

如果取消代码框中，然后国家将黑色和白色。如果你检查它的颜色是颠倒的。至少这就是我认为你在寻找的东西。

这与您之前的问题基本上是相同的解决方案。看到小提琴：http://jsfiddle.net/YBGm4/9/

我改变了这个：

scale: { 
    '1': '#B1C9C0', 
    '2': '#41a62a' 
}, 

要这样：

scale: ['#B1C9C0', '#41a62a'], 

我做出这种改变是因为这些创建不同类型规模的原因。与阵列的那个是jvm.ColorScale对象，这是我认为你正在寻找的东西。对象语法创建一个jvm.OrdinalScale对象。

也有一个语法错误的位置：

$('#mymap').jvm.WorldMap('get', 'mapObject'); 

应该是：

$('#mymap').vectorMap('get', 'mapObject'); 

而且我改变了以下（由于某种原因，它不喜欢的顺序量表语法）：

if (isChecked) { 
     console.log(mapObject.series.regions[0]); 
     mapObject.series.regions[0].setScale({ 
      '1': '#ffffff', 
       '2': '#000000' 
     }); 
    } else { 
     mapObject.series.regions[0].setScale({ 
      '1': '#000000', 
       '2': '#ffffff' 
     }); 
    } 

对此：

if (isChecked) { 
    mapObject.series.regions[0].setScale(['#ffffff', '#000000']);       
} else {   
    mapObject.series.regions[0].setScale(['#00000', '#ffffff']);    
}