Amchart 地图触发 "hit" 而不是 "hover"

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>

Amchart 地图触发 "hit" 而不是 "hover"

Amchart map triggering on "hit" instead "hover"

javascript

jquery

amcharts4