Question

我仍在努力实现这一目标：

如您所见 - 有一张地图和一个复选标记框。我想要复选标记框来控制国家/地区的颜色。

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

            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'
            });
        }
    });
});

所以使用上面的代码：

在加载时，它会加载所有带有COLOR＃B1C9C0'2'参数国家/地区的所有：'1'参数国家/地区＃41A62A

on checkmark：'1'参数国家/地区COLOR #ffffff'2'参数国家/地区颜色＃000000

取消选中：'1'参数国家/地区颜色＃000000'2'参数国家/地区颜色#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']);               
}

带有复选标记按钮的控制图

1 个答案: