更改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，它將不會執行任何操作）。這是你的更新clickMapObject事件：

"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. 
    } 
}], 

演示如下：

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>