为什么too​​ltipPosition =“ fixed”不起作用(amCharts v4)

时间:2019-04-15 18:17:42

标签: javascript amcharts4

为什么too​​ltipPosition =“ fixed”对我的地图不起作用? 我阅读了文档并按照说明进行了操作。 (https://www.amcharts.com/docs/v4/reference/tooltip/

function addSeries(country, tooltipHTML) {
    let newSeries = chart.series.push(new am4maps.MapPolygonSeries());
    newSeries.useGeodata = true;
    newSeries.include = country;
    newSeries.mapPolygons.template.fill = am4core.color("#4D7EAA");
    newSeries.fill = am4core.color("#4D7EAA");
    newSeries.mapPolygons.template.tooltipText = tooltipHTML;
    newSeries.mapPolygons.template.tooltipHTML = tooltipHTML;
    newSeries.tooltip.getFillFromObject = false;
    newSeries.tooltip.background.fill = am4core.color("#000");
    newSeries.tooltip.tooltipPosition = "fixed";
    newSeries.tooltip.x = 10;
    newSeries.tooltip.trackable = false;
    newSeries.tooltip.y = 30;
    newSeries.mapPolygons.template.events.on("over", over);
    newSeries.mapPolygons.template.events.on("out", out);
    newSeries.cursorOverStyle = am4core.MouseCursorStyle.pointer;
    let hs = newSeries.mapPolygons.template.states.create("hover");
    hs.properties.fill = am4core.color("#004685");
}

完整代码: https://codepen.io/nefayran/pen/BEmQvE

1 个答案:

答案 0 :(得分:0)

这是一个很好的问题。

请注意the documentation也说:

  

继承自Sprite

即该属性实际上不是Tooltip实例本身的属性,而是工具提示从触发它的对象获取的属性和行为(与tooltipText完全不同)。

通常,一个序列在其对象之间共享一个工具提示,因此即使在这种情况下,每个mapPolygon都会触发该工具提示,但它不是每个多边形的工具提示,而是一个在序列上共享的工具提示(几乎就像单身人士)。这样,当您从mapPolygon悬停到mapPolygon时,工具提示将保持连续可见,并相应地更改属性。

因此,在这种情况下,无需在工具提示本身上设置属性,只需在mapPolygons的模板上进行设置即可。

// newSeries.tooltip.tooltipPosition = "fixed";
newSeries.mapPolygons.template.tooltip.tooltipPosition = "fixed";

这是叉子:

https://codepen.io/team/amcharts/pen/29890969c7222b7ddba5c9fbeefa80b5

附录(2019-04-17)

问题:将鼠标悬停在城市(mapImage /它的子代)或行(mapLine或变体)上会杀死mapPolygon的悬停效果及其触发的行/动画。 / p>

解决方案:如果城市/线路没有诸如工具提示之类的任何用户交互功能,我的建议是完全禁用交互,因此将鼠标悬停在它们下方直接进入mapPolygon,即

cities.mapImages.template.interactionsEnabled = false;
lineSeries.mapLines.template.interactionsEnabled = false;

上面的演示已更新为包括这些行。