1

我正在构建具有多点选择行为的地图。目前我设法使用单一国家选择这是点击事件：

这是点击事件：

point: {
            events:{
                click: function(e){
                    //Reset dropdowns
                    $('.popup select').prop('selectedIndex',0);

                    //Reset popup info
                    $('.popup .text').html('');

                    //store path access string
                    var thisPath = 'svg path.highcharts-key-'+e.currentTarget.code.toLowerCase();

                    //Change color of selected path
                    $(thisPath).css({fill:'rgb(20,200,0)'});

                    //Add a data attr to popup div
                    $('.popup').attr('data-country-class', 'highcharts-key-'+e.currentTarget.code.toLowerCase());

                    //Update popup INFO
                    $('.popup .market .text')   .html(e.currentTarget.name);
                    $('.popup .region .text')   .html(e.currentTarget.region);
                    $('.popup .sz .text')       .html(e.currentTarget.stabZone);

                    //Listen to market dropdown change
                    $('.popup .market select').change(function  (e) {

                        //Currently selected country class
                        var countryClass = $(this).parents('.popup').attr('data-country-class');

                        if(this.value === 'exclude'){
                            $('svg path.'+countryClass).css({fill: 'rgb(200,20,0)'});
                        }
                        if(this.value === 'include'){
                            $('svg path.'+countryClass).css({fill: 'rgb(20,200,0)'});
                        }
                        if(this.value === 'remove'){
                            $('svg path.'+countryClass).css({fill: 'rgb(208, 220, 230)'});
                        }
                    });


                    $('.popup').hide().fadeIn(500).css({left:e.pageX+30, top: e.pageY-90});
                }
            }
        }

这是弹出标记

<div class="popup">
    <p class="market">
        <span><strong class="text"></strong></span>
         <select name="market-include" id="market-include">
            <option value="include">Include</option>
            <option value="exclude">Exclude</option>
             <option value="remove">Remove</option>
        </select>
    </p>
    <p class="region">
        <span><strong class="text"></strong></span>
        <select name="region-include" id="region-include">
            <option value="include">Include</option>
            <option value="exclude">Exclude</option>
            <option value="remove">Remove</option>
        </select>
    </p>
    <p class="sz">
        <span>Stability Zone <strong class="text"></strong></span>
        <select name="sz-include" id="sz-include">
            <option value="include">Include</option>
            <option value="exclude">Exclude</option>
            <option value="remove">Remove</option>
        </select>
    </p>
</div>

当区域获得包含值时，我需要一次选择多个国家/地区。

这是一个国家 json 定义的例子

{  
  "code":"US",
  "value":34,
  "name":"United States",
  "region": "AMER",
  "stabZone": "1a"
}

我一直在寻找一种将区域类添加到每个路径的方法，但找不到方法。

目前每条路径都有一个类。例如，美国路径具有以下 class="highcharts-name-united-states of america highcharts-key-us"

我也想找到一种方法来添加区域类，例如 highcharts-region-AMER

任何人都可以帮我这样做吗？

对此，我真的非常感激！

4

0 回答 0