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

Question

在amchartsamMap中，当一个人选择一个区域时，它会改变它的颜色。但每次，当选择多个区域时，它都是相同的颜色。如何在每次选择时使其具有不同的颜色，并且区域的颜色应与相邻区域不同。 小提琴

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 = '0123456789ABCDEF';
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
	  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 = '0123456789ABCDEF';
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>