控制圖用複選標記按鈕

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