Question

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

区域的选择会为该区域提供一些颜色，然后选择另一个区域，然后应该给它另一种颜色。如何实现这个目标？

Answer 1

您必须为区域本身分配新的个别颜色，然后再调用validateNow或validateData以重新绘制带有更改的地图。在区域中设置设置可能会改变所有区域＆＃39;颜色（但在你的情况下，它不会做任何事情，因为你没有调用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.
    }
}],

演示如下：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: