Question

我的目标是能够单击一个国家，并用特定颜色填充该国家的多边形背景。一旦我选择另一个国家/地区，以前的背景就会恢复为标准颜色。

如何重现该错误：单击代码笔上的一个国家，然后单击另一个国家。现在，将鼠标悬停在第一个上方，它将仍然处于“活动状态”。

当我仅单击国家/地区时，它确实可以工作，但是将鼠标悬停在国家/地区上之后，它将使用特定颜色而不是标准颜色（就像被选中一样）。

这是codepen： https://codepen.io/ms92o/pen/KBXqLO

以下是我创建的特定代码段：

我认为问题出在悬停效果结束后国家所处的状态。我认为默认状态将被使用，而我提供了标准的填充颜色。

var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
let polygon = ev.target;
if(selectedPolygon) {
 selectedPolygon.defaultState.properties.fill = am4core.color("#74B266");
 selectedPolygon.setState('default');
}
polygon.setState('active');
selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

/* Create active state and set fill different fill color */
var as = polygonTemplate.states.create("active");
as.properties.fill = am4core.color("#FF0000");

所以我的问题是：悬停效果后多边形处于什么状态？

Answer 1

通常，鼠标悬停时，精灵会返回默认状态。

在这种情况下，行为是意外的，因为该自定义状态"active"实际上是reserved name state。当您在此处选择其他图表中的多边形时使用它。而不是返回到默认值，而是返回到活动状态。为了避免在悬停状态，默认状态和活动状态之间造成混乱，在beta.45中引入了新状态"hoverActive"。

如果将状态名称/键更改为其他名称，则会发现该行为更可预期，因此可以使用一些任意键将代码中的"active"重构为：

var customActiveState = "selectedCountry";
var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
  /* NEW: Create an active state and set fill color to red */
  let polygon = ev.target;
  if(selectedPolygon) {
     selectedPolygon.defaultState.properties.fill = am4core.color("#74B266");
     selectedPolygon.setState('default');
  }
  polygon.setState(customActiveState);
  selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

/* Create active state and set fill different fill color */
var as = polygonTemplate.states.create(customActiveState);
as.properties.fill = am4core.color("#FF0000");

示例：https://codepen.io/team/amcharts/pen/477e8a80e09b4bf87128cd72cc082741

但这不是很有用，因为我们一停下来就会失去红色。

因此，我们可以采取一些路线，更简单的方法是如何利用保留的活动状态并使它为您工作，或者几乎像您一直在做的那样管理defaultState。

方法1-利用Sprite的togglable和isActive属性（由MapPolygons扩展）。

一旦精灵可以切换，单击它会自动切换活动状态，因此我们将逻辑排除在命中事件之外，只需确保取消切换先前切换的国家即可：

var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
  /* NEW: Create an active state and set fill color to red */
  let polygon = ev.target;
  if(selectedPolygon && selectedPolygon !== polygon) {
     selectedPolygon.isActive = false;
  }
  selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

/* Create active state and set fill different fill color */
var as = polygonTemplate.states.create("active");
as.properties.fill = am4core.color("#FF0000");

示例：https://codepen.io/notacouch/pen/259c803601ff6f286a294d1477f022ba

方法2-省略整个自定义活动状态，获取您已有的代码，并覆盖新选择的多边形的当前填充和默认状态填充（我们必须覆盖当前填充，因为如果您覆盖defaultState的填充填充，您必须等到将鼠标悬停才能看到它）：

var selectedPolygon;
polygonTemplate.events.on("hit", function(ev) {
  /* NEW: Create an active state and set fill color to red */
  let polygon = ev.target;
  if(selectedPolygon) {
     selectedPolygon.defaultState.properties.fill = am4core.color("#74B266");
     selectedPolygon.setState('default');
  }
  polygon.defaultState.properties.fill = polygon.fill = am4core.color("#FF0000");
  selectedPolygon = polygon;
})

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

示例：https://codepen.io/team/amcharts/pen/67121e27c3c1d50d669bca0ed040f746

AmCharts V4-悬停事件结束后，AmCharts使用哪种默认状态？

1 个答案: