2

JVectorMap プラグインの 個々の領域とホバーの色を設定し、データのない領域をデフォルトの白のままにしたいと思います。

ここまでで、スケール データを取り除き、カラー コードに置き換えました (以下のコードを参照)。これは素晴らしいですが、ホバー データを追加する方法もわかりません。

可能であれば、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 をこれまで以上に使いこなすよう求められました。悲しいことに、私はこのプログラミング コードだけが危険なので、専門家に連絡しています。

4

1 に答える 1