javascript - 如何在 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 的形式出现属性(property)。

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

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

请注意 showAsSelected 是在 3.x 之后的一些版本中引入的。 (很抱歉，我不太记得是哪一个)如果您使用的是旧版本的 JavaScript map ，它可能无法工作。

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

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