Jvectormap - 각 영역의 호버 색을 설정 하시겠습니까?

Question

JVectorMap 플러그인의 개별 영역 및 호버 색을 설정하고 데이터가없는 영역을 기본 흰색으로 설정하고 싶습니다.

지금까지 스케일 데이터를 제거하고 색상 코드로 대체했습니다 (아래 코드 참조). 이것은 굉장하지만 hover 데이터를 추가하는 방법을 모르겠습니다.

가능한 경우 개별 영역 (예 : 엔티티가 거래가 차단 된 위치)을 끌 수 있도록 document.body.style.cursor에 대한 데이터를 추가하고 싶습니다. 활성 링크로 보이지 않습니다.

패널을 열려면 코드를 작성해야합니다. 그것은 데이터가있는 각 지역에 대한 개별화 된 콘텐츠로 가득 찬 팝업 div를 표시하기위한 것입니다. 상속 된 코드입니다. 솔직히 말해서 어떻게 작동하는지 잘 모르겠습니다.

아무 것도 잊어 버린 경우 알려 주시기 바랍니다.

jQuery.noConflict(); 
jQuery(function(){ 
    var $ = jQuery; 
    $('#map_custom').vectorMap({ 
     map: 'world_mill_en', 
     backgroundColor : "#b8b8b8", 
     regionStyle : { 
      initial : { 
       fill : "white", 
       "fill-opacity" : 1, 
       stroke : "none", 
       "stroke-width" : 0, 
       "stroke-opacity" : 1 
      }, 
      hover : { 
       "fill-opacity": 0.7, 
      }, 
      selectedHover : {} 
     }, 
     onRegionOver: function (event, code, region) { 
      document.body.style.cursor = "pointer"; 
     }, 
     onRegionOut: function (element, code, region) { 
      document.body.style.cursor = "default"; 

     }, 
     onRegionClick: function(event, code, region){ 
      if (code == "CA") {window.location = 'CalRamic-distributors-Canada.html'} 
       if (code == "US") {window.location = 'CalRamic-distributors-USA.html'} 
        if (code == "IE") { 
         $(".panel").hide("fast"); 
         $("#ireland").show("slow"); 
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "GB") { 
         $(".panel").hide("fast"); 
         $("#unitedkingdom").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "ES") { 
         $(".panel").hide("fast"); 
         $("#spain").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "PT") { 
         $(".panel").hide("fast"); 
         $("#portugal").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "IL") { 
         $(".panel").hide("fast"); 
         $("#israel").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
     // I've got a LOT more countries in my code, but you don't need all of them 
     else if (code){ 
      event.preventDefault();  
     } 
    },  
    series: { 
     regions: [{ 
      values: sample_data 
     }] 
    } 
}); 

    /* Close the Panel */ 
     $("body").click(function(e) {  
      if (e.target.id == "close" || $(e.target).parents("#close").size()) 
      {    
       $(".panel").hide("slow"); 
      } 
     }); 

}) 

현재이 코드는 같은 형식되고 sample_data.js 파일에서 색상 데이터를 가져옵니다 :

var sample_data = { 
     "CA": '#0071a4', 
     "US": '#0071a4', 
     "IE": '#0071a4', 
     "GB": '#0071a4', 
     "ES": '#0071a4', 
    } 

내가 여기에 지역 사회에 초보자 덕분에 꽤 멀리 입수했습니다,하지만 난 ' jvectormap으로 멀리 가도록 요청 받았습니다. 그리고 슬프게도이 프로그래밍 코드로 인해 위험 할뿐입니다. 따라서 전문가에게 문의하고 있습니다.

Answer 1

첫째로, 그것은 단지 제안 일 뿐이므로, 논리라면 미쳐 버리고 일반화 된 기능으로 만들어야합니다. 예를 들어

: 귀하의 질문에 관해서는

function panelHandler(element, hideSpeed, showSpeed){ 
    $('.panel').hide(hideSpeed); 
    $(element).show(showSpeed); 
    $('#test_data').innerHTML('code'); 
} 

if (code == "IE") { 
    panelHandler("#unitedKingdom", "slow", "fast"); 
} 

if (code == "GB") { 
    panelHandler("#spain", "slow", "fast"); 
} 

etc... 

, 당신이 따라 원하는 수준의 설정을 첨부합니다. 그런 다음 이벤트에서 확인한 후 다음과 같이 실행하십시오.

$('#selector').css('cursor', 'pointer'); 

이 정보가 도움이되기를 바랍니다. 좀 더 자세하게 뭔가가 필요하면 알려주고, 도와 줄 수 있습니다.