如何在 amCharts 上突出显示所选位置

Question

我正在使用 amCharts。将鼠标悬停在该位置并单击特定位置时，我可以突出显示该区域。

rollOverOutlineColor: "#000000",
rollOverColor: "#62B4EB",
selectedColor: "#0078c8",

但是点击下一个位置，当前位置会高亮显示，旧位置会松动。我想显示所有选定/单击的位置以特定颜色突出显示。

map = new AmCharts.AmMap();
map.areasSettings = {
    autoZoom: false,
    rollOverOutlineColor: "#000000",
    rollOverColor: "#62B4EB",
    selectedColor: "#0078c8",
    color: "#999999",
    selectable:true
};

map.pathToImages = '/images/';

map.dataProvider = data;

求推荐。

Answer 1

您的解决方案是使用区域的 showAsSelected 属性。

点击事件(clickMapObject)发生时，可以设置点击区域showAsSelected属性保持选中状态

map.addListener("clickMapObject", function(event) {
  event.mapObject.showAsSelected = true;
});

请注意 showAsSelected 是在后来的 3.x 版本中引入的。（很抱歉，我不太记得是哪一个）如果您使用的是旧版本的 JavaScript 地图，它可能无法使用。

这是当前版本的工作演示：

var map;
var data = {
  "map": "worldLow",
  "getAreasFromMap": true
};

map = new AmCharts.AmMap();
map.areasSettings = {
  autoZoom: false,
  rollOverOutlineColor: "#000000",
  rollOverColor: "#62B4EB",
  selectedColor: "#0078c8",
  color: "#999999",
  selectable: true
};

map.pathToImages = '/images/';

map.dataProvider = data;

map.addListener("clickMapObject", function(event) {
  event.mapObject.showAsSelected = true;
});

map.write("chartdiv");

<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

更新：如果您想使用 groupId 参数切换整个国家组，请按以下步骤操作：

map.addListener("clickMapObject", function(event) {
  if (event.mapObject.groupId !== undefined) {
    for(var i = 0; i < map.dataProvider.areas.length; i++) {
      var area = map.dataProvider.areas[i];
      if (area.groupId == event.mapObject.groupId) {
        area.showAsSelected = true;
      }
    }
    map.validateData();
  }
  else {
    event.mapObject.showAsSelected = true;
  }
});

如何在 amCharts 上突出显示所选位置

How to highlight selected location on amCharts

javascript

amcharts

ammap