AMCharts 4 - 应用于单个国家/地区时的地图笔划不均匀答案

【问题标题】：AMCharts 4 - Map stroke uneven when applied to single countriesAMCharts 4 - 应用于单个国家/地区时的地图笔划不均匀
【发布时间】：2019-03-07 15:14:45
【问题描述】：

如上图所示。我已经在美国中风了。然而，大陆笔画的顶部显然比笔画的其余部分要薄。我的配置如下：

  polygonTemplate.stroke = am4core.color('#2c2626')
  polygonTemplate.strokeWidth = 0
  polygonTemplate.nonScalingStroke = true

然后我有一个适配器来描边活跃的国家/地区，

polygonTemplate.adapter.add('strokeWidth', (stroke, target) => {
    if (target.dataItem && target.dataItem.dataContext && this.selectedCountry) {
      if (target.dataItem.dataContext.id === this.selectedCountry.id) {
        return 2
      }
    }
    return stroke
  })

从我从网上的例子中可以找到，这是应用笔画的正确方法。有没有一种方法可以让我在全国范围内进行这种中风？大多数国家都会发生这种情况，但也有一些国家没有那么糟糕。

编辑：感谢 Sam 的帮助，我现在的中风平稳了。但似乎我必须按两次新国家才能使其处于活动状态 - 一次将旧国家切换为非活动状态，然后再次添加活动状态。下面是 GIF

【问题讨论】：

标签： maps amcharts

【解决方案1】：

问题是，接壤的国家与您选择的国家的笔划重叠。我将strokeWidth 增加到 10，并将fillOpacity 设置为 0.6。您可以在下图中或that 代码笔中清楚地看到这一点。

在适配器中设置zIndex 对我来说也没有任何改变。

但是你可以使用states:

使用您要使用的属性创建一个活动（或自定义）状态。你也可以在那里使用zIndex。现在将该状态设置为您要突出显示的每个国家/地区。

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fillOpacity = 0.6;
polygonTemplate.stroke = am4core.color('#2c2626');
polygonTemplate.strokeWidth = 0;
polygonTemplate.zIndex = 0;
polygonTemplate.nonScalingStroke = true;

// Create active state
var activeState = polygonTemplate.states.create("active");
activeState.properties.strokeWidth = 10;
activeState.properties.zIndex = 1;

// Create an event to toggle "active" statestate
polygonTemplate.events.on("hit", function(ev) {
  ev.target.isActive = !ev.target.isActive;
  console.log(ev.target.dataItem.dataContext.id);
});

chart.events.once('inited', event => {
  polygonSeries.mapPolygons.values.find(i => i.dataItem.dataContext.id === 'US').isActive = true;
});

结果如下：

This 代码笔显示状态示例。希望对您有所帮助。

编辑：

要使用双击来切换活动状态，您只需将 hit 事件替换为 doublehit 事件 (docs)。但是您现在可能想禁用双击缩放。这可以通过以下几行 (docs)：

chart.seriesContainer.events.disableType("doublehit");
chart.chartContainer.background.events.disableType("doublehit");

我创建了this 代码笔来向您展示一个示例。

【讨论】：

嘿，谢谢。它似乎正在工作，但是我需要按国家两次才能触发活动状态。有什么想法吗？
您可以将hit 事件替换为doublehit。我据此更新了我的答案，并附上了一支代码笔。
啊对不起山姆，也许我不清楚 - 我已经编辑了我的 OP 以包含正在发生的事情的 gif。但基本上似乎我必须单击一次才能从一个国家/地区关闭活动状态，然后再次单击以将其添加到新国家/地区。
没关系！这是我在 vue 中唯一的计算函数，它破坏了 AMcharts 制作的活动道具 :)

【解决方案2】：

更新的解决方案：https://codepen.io/team/amcharts/pen/dyXPRVR 对于悬停的多边形，您必须将一些 zIndex 设置为一个大数字，并调用 toFront() 以使其高于先前悬停的多边形：

polygonTemplate.events.on("over", function(event){
    event.target.zIndex = Number.MAX_VALUE;
    event.target.toFront();
})

【讨论】：