クリックしてエリアの選択した色を切り替えます。

Question

this exampleのようなマップで作業していましたが、クリックすると複数の国を同時に選択できます。これを世界地図に追加しましたが、一度クリックすると国が青くなり、2回クリックすると赤くなり、3回目にクリックすると選択されなくなります。私が現在働いていることで、国が2回クリックされると、別の国を移動した後に赤く表示されます。選択した色を正しく設定していませんか？私はドキュメントといくつかの例を見てきましたが、私は解決策を見つけることができませんでした。どんな助けでも大歓迎です。ここに私がこれまで持っているものがあります。

var map = AmCharts.makeChart("chartdiv", { 
 
    "type": "map", 
 
    "theme": "light", 
 
    "projection": "miller", 
 

 
    "dataProvider": { 
 
    "map": "worldLow", 
 
    "getAreasFromMap": true 
 
    }, 
 
    "areasSettings": { 
 
    "autoZoom": false, 
 
    "color": "#CDCDCD", 
 
    "selectedColor": "#5EB7DE", 
 
    "selectable": true 
 
    }, 
 
    "listeners": [{ 
 
    "event": "clickMapObject", 
 
    "method": function(event) { 
 
     // deselect the area by assigning all of the dataProvider as selected object 
 
     map.selectedObject = map.dataProvider; 
 

 
     if (event.mapObject.showAsSelected == false || typeof event.mapObject.showAsSelected == 'undefined') { 
 
     event.mapObject.showAsSelected = true; 
 
     } else if (event.mapObject.showAsSelected == true && event.mapObject.selectedColorReal == "#5EB7DE") { 
 
     event.mapObject.selectedColorReal = "#CC0000"; 
 
     } else { 
 
     event.mapObject.showAsSelected = false; 
 
     event.mapObject.selectedColorReal = "#5EB7DE" 
 
     map.returnInitialColor(event.mapObject); 
 
     } 
 
    } 
 
    }], 
 
    "export": { 
 
    "enabled": true, 
 
    "position": "bottom-right" 
 
    } 
 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<div id="chartdiv"></div>

Answer 1

あなたがロールオーバー時に色が変わるだけで理由を説明され、異なる方法で処理され、その内部プロパティとしてselectedColorRealを更新しないでください。エリアの代わりにselectedColorを設定してください。

使用する色を選択する場合、selectedColorで使用する色を決定するために領域を何回クリックしたかを追跡する何らかの種類のカスタムプロパティを設定して、最後にshowAsSelectedを設定して選択を解除する必要があります虚偽や地域のvalidateメソッドを呼び出すと、例えば、それを更新する：

"listeners": [ { 
    "event": "clickMapObject", 
    "method": function(event) { 
     // deselect the area by assigning all of the dataProvider as selected object 
     map.selectedObject = map.dataProvider; 

     //define a custom click count property to store state 
     //if not already defined 
     if (event.mapObject.clickCount === undefined) { 
     event.mapObject.clickCount = 0; 
     } 
     //increment click count 
     ++event.mapObject.clickCount; 

     //if we're not at the third click, maintain the showAsSelected 
     //state while updating the color 
     if (event.mapObject.clickCount < 3) { 
     event.mapObject.showAsSelected = true; 
     event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000"); 
     } 
     //otherwise, restore the initial color and reset the counter 
     else { 
     event.mapObject.clickCount = 0; 
     event.mapObject.showAsSelected = false; 
     } 

     //update the area's color 
     event.mapObject.validate(); 
    } 
    } ], 

var map = AmCharts.makeChart("chartdiv", { 
 
    "type": "map", 
 
    "theme": "light", 
 
    "projection": "miller", 
 

 
    "dataProvider": { 
 
    "map": "worldLow", 
 
    "getAreasFromMap": true 
 
    }, 
 
    "areasSettings": { 
 
    "autoZoom": false, 
 
    "color": "#CDCDCD", 
 
    "selectedColor": "#5EB7DE", 
 
    "selectable": true 
 
    }, 
 
    "listeners": [ { 
 
    "event": "clickMapObject", 
 
    "method": function(event) { 
 
     // deselect the area by assigning all of the dataProvider as selected object 
 
     map.selectedObject = map.dataProvider; 
 

 
     //define a custom click count property to store state 
 
     //if not already defined 
 
     if (event.mapObject.clickCount === undefined) { 
 
     event.mapObject.clickCount = 0; 
 
     } 
 
     //increment click count 
 
     ++event.mapObject.clickCount; 
 

 
     //if we're not at the third click, maintain the showAsSelected 
 
     //state while updating the color 
 
     if (event.mapObject.clickCount < 3) { 
 
     event.mapObject.showAsSelected = true; 
 
     event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000"); 
 
     } 
 
     //otherwise, restore the initial color and reset the counter 
 
     else { 
 
     event.mapObject.clickCount = 0; 
 
     event.mapObject.showAsSelected = false; 
 
     } 
 

 
     //update the area's color 
 
     event.mapObject.validate(); 
 
    } 
 
    } ], 
 
    "export": { 
 
    "enabled": true, 
 
    "position": "bottom-right" 
 
    } 
 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<div id="chartdiv"></div>