为什么 tooltipPosition = "fixed" 不起作用(amCharts v4)
Why tooltipPosition = "fixed" don't work (amCharts v4)
为什么 tooltipPosition = "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");
}
这是个好问题。
请注意 the documentation 还说:
Inherited from 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
和 line/animation 的悬停效果它会触发。
解决方案:如果 cities/lines 没有任何用户交互功能(如工具提示),我的建议是完全禁用交互,因此将鼠标悬停在它们上方会直接指向下面的 mapPolygon
,即
cities.mapImages.template.interactionsEnabled = false;
lineSeries.mapLines.template.interactionsEnabled = false;
上面的演示已更新为包含这些行。
为什么 tooltipPosition = "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");
}
这是个好问题。
请注意 the documentation 还说:
Inherited from 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
和 line/animation 的悬停效果它会触发。
解决方案:如果 cities/lines 没有任何用户交互功能(如工具提示),我的建议是完全禁用交互,因此将鼠标悬停在它们上方会直接指向下面的 mapPolygon
,即
cities.mapImages.template.interactionsEnabled = false;
lineSeries.mapLines.template.interactionsEnabled = false;
上面的演示已更新为包含这些行。