Amchart 地图触发“命中”而不是“悬停”

Question

我有一张地图，我想在其中更改悬停颜色，然后单击固定颜色。它以某种方式出现故障，即使仅在悬停时（黑色而不是蓝色），它有时也会开始激活“命中”颜色。

当您单击一个区域然后将鼠标悬停在邻居上时，就会发生这种情况。

仅供参考，您可能会在全屏时看到更好。

你能告诉我我的代码有什么问题吗？ 谢谢

    var map = am4core.create("chartdiv", am4maps.MapChart);

    map.seriesContainer.events.disableType("doublehit");
    map.chartContainer.background.events.disableType("doublehit");
    map.seriesContainer.draggable = false;
    map.seriesContainer.resizable = false;

    map.geodata = am4geodata_slovakiaLow;
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;

    map.projection = new am4maps.projections.Mercator();

    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = am4core.color("white");
    polygonTemplate.stroke = am4core.color("black");


    var myEvent = polygonTemplate.events.on("hit", (ev) => {
        console.log("You clicked on :" + ev.target.dataItem.dataContext.name);

    }, this);

    // Create active state
   var activeState = polygonTemplate.states.create("active");
    activeState.properties.fill = am4core.color("black");

    // Create an event to toggle "active" state
    polygonTemplate.events.on("hit", function(ev) {
        polygonSeries.mapPolygons.each(function(polygon){
            polygon.setState("default");
        });

        ev.target.isActive = !ev.target.isActive;
    })


    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#7660E6");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/slovakiaLow.js"></script>
<div id="chartdiv" style="width: 900px; height: 800px;"></div>

Answer 1

您有两个 hit 事件处理程序。即使这不是问题，最好只有一个……为了代码的可读性。

问题是关于polygon.setState("default"); 老实说，我真的不知道它的作用......哈哈

但是你想要做的是删除所有多边形上的active“状态”......所以为什么不这样做：

polygonSeries.mapPolygons.each(function (polygon) {
  //polygon.setState("default");
  polygon.isActive = false
});

有效。

var map = am4core.create("chartdiv", am4maps.MapChart);

map.seriesContainer.events.disableType("doublehit");
map.chartContainer.background.events.disableType("doublehit");
map.seriesContainer.draggable = false;
map.seriesContainer.resizable = false;

map.geodata = am4geodata_slovakiaLow;
var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;

map.projection = new am4maps.projections.Mercator();

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("white");
polygonTemplate.stroke = am4core.color("black");

// Create active state
var activeState = polygonTemplate.states.create("active");
activeState.properties.fill = am4core.color("black");

// Create an event to toggle "active" state
polygonTemplate.events.on("hit", function (ev) {
  console.log("You clicked on :" + ev.target.dataItem.dataContext.name);
  polygonSeries.mapPolygons.each(function (polygon) {
    //polygon.setState("default");
    polygon.isActive = false
  });

  // Set active on the clicked one
  ev.target.isActive = true;
});

var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#7660E6");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/slovakiaLow.js"></script>
<div id="chartdiv" style="width: 900px; height: 800px;"></div>