更改amMap中选定区域的颜色，使用与相邻区域不同的颜色，

在amcharts amMap中，当选择一个区域时，它会更改其颜色。但每次选择多个区域时，它都是相同的颜色。如何使它与每个选区的颜色不同，区域的颜色应该与相邻区域不同。 JsFiddle 更改amMap中选定区域的颜色，使用与相邻区域不同的颜色，

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>

的区域的选择提供一些颜色到该区域，然后选择然后另一个区域应给予另一种颜色。如何实现这件事？

来源

2017-08-10 Rohit Bisht

您必须将新的个别颜色分配给该区域，然后再调用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>

来源

2017-08-10 21:06:24 xorspark

但仍然有一种可能性，即两个相同颜色的邻近区域。你所做的是给随机颜色选定的区域。那是对的。但如何限制再次给相同的颜色到任何选定的区域。 –

当然这是使用随机算法的可能性。如果你想继续使用随机颜色方法，你必须在这之前循环/检查颜色是否相同，但这是很大的开销。一个更好的解决方案是为每个区域预先设置一个唯一颜色的'selectedColor'属性。最难的部分是20多种颜色。 :) – xorspark

更改amMap中选定区域的颜色，使用与相邻区域不同的颜色，

回答

相关问题