0

我一直在研究类似于此示例的地图，单击时可以一次选择多个国家/地区。我把它添加到世界地图上，但我想改变它，点击一次，国家会变成蓝色，点击两次，国家会变成红色，点击第三次，它会变成未选中状态。就我目前的工作而言，当一个国家被点击两次时，它只会在移动到另一个国家后才会显示为红色。我没有正确设置所选颜色吗？我查看了文档和更多示例，但找不到解决方案。任何帮助是极大的赞赏。这是我到目前为止所拥有的。

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "projection": "miller",

  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "selectedColor": "#5EB7DE",
    "selectable": true
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(event) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      if (event.mapObject.showAsSelected == false || typeof event.mapObject.showAsSelected == 'undefined') {
        event.mapObject.showAsSelected = true;
      } else if (event.mapObject.showAsSelected == true && event.mapObject.selectedColorReal == "#5EB7DE") {
        event.mapObject.selectedColorReal = "#CC0000";
      } else {
        event.mapObject.showAsSelected = false;
        event.mapObject.selectedColorReal = "#5EB7DE"
        map.returnInitialColor(event.mapObject);
      }
    }
  }],
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.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" />
<div id="chartdiv"></div>

4

1 回答 1

0

不要更新selectedColorReal，因为它是一个以不同方式处理的内部属性，这解释了为什么您的颜色仅在您翻转时发生变化。selectedColor改为设置区域。

至于选择使用哪种颜色，您需要设置某种自定义属性来跟踪一个区域被点击了多少次以确定使用哪种颜色，然后通过设置为 false 并调用该区域的方法selectedColor最终取消选择它更新它，例如：showAsSelectedvalidate

  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      //define a custom click count property to store state
      //if not already defined
      if (event.mapObject.clickCount === undefined) {
        event.mapObject.clickCount = 0;
      }
      //increment click count
      ++event.mapObject.clickCount;

      //if we're not at the third click, maintain the showAsSelected 
      //state while updating the color
      if (event.mapObject.clickCount < 3) {
        event.mapObject.showAsSelected = true;
        event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000");
      }
      //otherwise, restore the initial color and reset the counter
      else {
        event.mapObject.clickCount = 0;
        event.mapObject.showAsSelected = false;
      }

      //update the area's color
      event.mapObject.validate();
    }
  } ],


var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "projection": "miller",

  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "selectedColor": "#5EB7DE",
    "selectable": true
  },
  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      //define a custom click count property to store state
      //if not already defined
      if (event.mapObject.clickCount === undefined) {
        event.mapObject.clickCount = 0;
      }
      //increment click count
      ++event.mapObject.clickCount;

      //if we're not at the third click, maintain the showAsSelected 
      //state while updating the color
      if (event.mapObject.clickCount < 3) {
        event.mapObject.showAsSelected = true;
        event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000");
      }
      //otherwise, restore the initial color and reset the counter
      else {
        event.mapObject.clickCount = 0;
        event.mapObject.showAsSelected = false;
      }

      //update the area's color
      event.mapObject.validate();
    }
  } ],
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.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" />
<div id="chartdiv"></div>

于 2017-10-15T00:55:44.283 回答