amMapの選択領域の色を、隣接する領域と異なる色で変更します。

Question

amcharts amMapでは、リージョンを選択すると色が変わります。しかし、毎回、複数の領域を選択すると、同じ色になります。どんな選択でも色を変える方法と、その領域の色は隣接する領域とは異なるはずです。 JsFiddle

var map = AmCharts.makeChart("chartdiv", { 
 
    "type": "map", 
 
    "theme": "black", 
 
    "panEventsEnabled": true, 
 
    "backgroundColor": "#00aeff", 
 
    "backgroundAlpha": 1, 
 
    "dataProvider": { 
 
     "map": "indiaLow", 
 
     "getAreasFromMap": true, 
 
     "images": [{ 
 
      "id": "backButton", 
 
      "label": "Back to continents map", 
 
      "rollOverColor": "#ffffff", 
 
      "labelRollOverColor": "#ffffff", 
 
      "useTargetsZoomValues": true, 
 
      "right": 100, 
 
      "top": 30, 
 
      "labelFontSize": 10, 
 
      "selectable": true, 
 
      "imageURL": "http://simplemaps.com/static/svg/in/in.svg", 
 
      "width": 32, 
 
      "height": 32, 
 
      "label": "District Level Map" 
 
     }] 
 
    }, 
 
    "areasSettings": { 
 
     "autoZoom": false, 
 
     "color": "#CDCDCD", 
 
     "colorSolid": "#5EB7DE", 
 
     "selectedColor": "#5EB7DE", 
 
     "selectedColor": getRandomColor(), 
 
     "outlineColor": "#666666", 
 
     "rollOverColor": "#ffffff", 
 
     "rollOverOutlineColor": "#FFFFFF", 
 
     "selectable": true 
 
    }, 
 
    "listeners": [{ 
 
     "event": "clickMapObject", 
 
     "method": function(event) { 
 
     //I tried this but not working. I think map is not taking the new areasettinng values. 
 
      map.areasSettings = {selectedColor : ""}; 
 
      map.areasSettings = {selectedColor : getRandomColor()}; 
 
      map.selectedObject = map.dataProvider; 
 
      event.mapObject.showAsSelected = !event.mapObject.showAsSelected; 
 
      map.returnInitialColor(event.mapObject); 
 
      var states = []; 
 
      for (var i in map.dataProvider.areas) { 
 
       var area = map.dataProvider.areas[i]; 
 
       if (area.showAsSelected) { 
 
        states.push(area.title); 
 
       } 
 
      } 
 
     } 
 
    }], 
 
    "export": { 
 
     "enabled": false 
 
    } 
 
}); 
 
function getRandomColor() { 
 
    var letters = 'ABCDEF'; 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
     color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    return color; 
 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.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" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script> 
 
<div id="chartdiv"></div>

領域の選択 は、その領域にいくつかの色を与え、次いで選択された別の領域は、それは別の色を与えられるべきです。このことを達成するには？

Answer 1

領域自体に新しい個別の色を割り当ててから、その後にvalidateNowまたはvalidateDataを呼び出して、変更を加えたマップを再描画する必要があります。 areasSettingsに設定すると、すべての領域の色が変更される可能性があります（ただし、validateNow/Dataを呼び出していないため何もしません）。以下

"listeners": [{ 
    "event": "clickMapObject", 
    "method": function(event) { 
     map.selectedObject = map.dataProvider; 
     event.mapObject.showAsSelected = !event.mapObject.showAsSelected; 
     map.returnInitialColor(event.mapObject); 
     var states = []; 
     for (var i in map.dataProvider.areas) { 
      var area = map.dataProvider.areas[i]; 
      if (area.showAsSelected) { 
       //set a new color only if it wasn't assigned before 
       area.selectedColor = area.selectedColor || getRandomColor(); 
       states.push(area.title); 
      } 
     } 

     // set same zoom levels to retain map position/zoom in case a selection was made after a zoom 
     map.dataProvider.zoomLevel = map.zoomLevel(); 
     map.dataProvider.zoomLatitude = map.dataProvider.zoomLatitude = map.zoomLatitude(); 
     map.dataProvider.zoomLongitude = map.dataProvider.zoomLongitude = map.zoomLongitude(); 
     map.validateNow(); //redraw the map with the new selection/colors. 
    } 
}], 

デモ：ここにあなたの更新clickMapObjectイベントだ

var map = AmCharts.makeChart("chartdiv", { 
 
    "type": "map", 
 
    "theme": "black", 
 
    "panEventsEnabled": true, 
 
    "backgroundColor": "#00aeff", 
 
    "backgroundAlpha": 1, 
 
    "dataProvider": { 
 
     "map": "indiaLow", 
 
     "getAreasFromMap": true, 
 
     "images": [{ 
 
      "id": "backButton", 
 
      "label": "Back to continents map", 
 
      "rollOverColor": "#ffffff", 
 
      "labelRollOverColor": "#ffffff", 
 
      "useTargetsZoomValues": true, 
 
      "right": 100, 
 
      "top": 30, 
 
      "labelFontSize": 10, 
 
      "selectable": true, 
 
      "imageURL": "http://simplemaps.com/static/svg/in/in.svg", 
 
      "width": 32, 
 
      "height": 32, 
 
      "label": "District Level Map" 
 
     }] 
 
    }, 
 
    "areasSettings": { 
 
     "autoZoom": false, 
 
     "color": "#CDCDCD", 
 
     "colorSolid": "#5EB7DE", 
 
     "selectedColor": "#5EB7DE", 
 
     "selectedColor": getRandomColor(), 
 
     "outlineColor": "#666666", 
 
     "rollOverColor": "#ffffff", 
 
     "rollOverOutlineColor": "#FFFFFF", 
 
     "selectable": true 
 
    }, 
 
    "listeners": [{ 
 
     "event": "clickMapObject", 
 
     "method": function(event) { 
 
      map.selectedObject = map.dataProvider; 
 
      event.mapObject.showAsSelected = !event.mapObject.showAsSelected; 
 
      map.returnInitialColor(event.mapObject); 
 
      var states = []; 
 
      for (var i in map.dataProvider.areas) { 
 
       var area = map.dataProvider.areas[i]; 
 
       if (area.showAsSelected) { 
 
        //set a new color only if it wasn't assigned before 
 
       \t area.selectedColor = area.selectedColor || getRandomColor(); 
 
        states.push(area.title); 
 
       } 
 
      } 
 
      
 
      // set same zoom levels to retain map position/zoom in case a selection was made after a zoom 
 
      map.dataProvider.zoomLevel = map.zoomLevel(); 
 
      map.dataProvider.zoomLatitude = map.dataProvider.zoomLatitude = map.zoomLatitude(); 
 
      map.dataProvider.zoomLongitude = map.dataProvider.zoomLongitude = map.zoomLongitude(); 
 
      map.validateNow(); //redraw the map with the new selection/colors. 
 
     } 
 
    }], 
 
    "export": { 
 
     "enabled": false 
 
    } 
 
}); 
 
function getRandomColor() { 
 
    var letters = 'ABCDEF'; 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
     color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    return color; 
 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.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" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script> 
 
<div id="chartdiv"></div>