Amcharts4标记HTML-Tooltips没有悬停事件

时间:2019-03-30 09:14:49

标签: angular typescript amcharts amcharts4

我使用this示例来点击地图标记,而我的目标是默认显示mapMarker.tooltipHTML元素,而无需将它们悬停在上面。欢迎使用诸如创建html标记之类的其他选择。

1 个答案:

答案 0 :(得分:2)

为使Tooltip能够以您想要的方式正常工作,需要执行几个步骤。首先,工具提示通常是单例的,而不是每个多边形或每个mapImage的工具提示,它们实际上是在其系列中共享的。因此,每个人都必须使用自己的工具提示(在大多数情况下,下面的mapImageimageSeries.mapImages.template):

mapImage.tooltip = new am4core.Tooltip();

接下来,通常在悬停时启用工具提示的条件是,是否设置了tooltipTexttooltipHTML而不是空字符串。

mapImage.tooltipText = "Latitude: {latitude}\nLongitude: {longitude}";

悬停时显示的工具提示是默认行为,最简单的方法是在mapImage上禁用鼠标交互:

mapImage.interactionsEnabled = false;

现在,创建标记后,我们将显示工具提示:

mapImage.events.once("inited", function(event) {
  event.target.showTooltip();
});

默认情况下,工具提示position已设置为"fixed",其提示pointerOrientation已设置为"vertical",我们只需要将其显示在标记上方即可,在此示例中是32x32 px,缩小了30%,因此我们只需通过mapImage的{​​{1}}属性将其上移32 * .7:

tooltipY

最后但并非最不重要的一点是,工具提示不会在缩放中保持其位置,因此,我们必须自己进行操作,方法是侦听缩放更改,将地图图像的经/纬度坐标转换为图表x / y坐标,并且将其传递给每个工具提示:

mapImage.nonScaling = true; // this is also necessary so the size/vertical shift is predictably the same
mapImage.tooltipY = -32 * .7;

这是一个演示:

https://codepen.io/team/amcharts/pen/698eb4a11c35733850fbc084631bfc21

附录(2019-04-11):

您还可以bind the latitude/longitude properties to data并通过chart.events.on("zoomlevelchanged", function() { imageSeries.mapImages.each(function(mapImage) { var point = chart.geoPointToSVG({ latitude: mapImage.latitude, longitude: mapImage.longitude }); mapImage.tooltip.moveTo({ x: point.x, y: point.y - (32 * .7)}); }); }); 方法创建mapImages,例如

addData

如果要从var mapImage = imageSeries.mapImages.template; mapImage.propertyFields.latitude = "latitude"; mapImage.propertyFields.longitude = "longitude"; // You can even start off with some markers at the onset // From our Animations along lines demo: https://www.amcharts.com/demos/animations-along-lines/ imageSeries.data = [ { "latitude": 48.8567, "longitude": 2.3510, "name": "Paris"}, { "latitude": 43.8163, "longitude": -79.4287, "name": "Toronto"}, { "latitude": 34.3, "longitude": -118.15, "name": "Los Angeles"}, { "latitude": 23, "longitude": -82, "name": "Havana"}, ]; chart.seriesContainer.events.on("hit", function(ev) { var coords = chart.svgPointToGeo(ev.svgPoint); // var marker = imageSeries.mapImages.create(); // marker.latitude = coords.latitude; // marker.longitude = coords.longitude; imageSeries.addData({ latitude: coords.latitude, longitude: coords.longitude, }); }); 数组的开头删除标记,请使用removeData method。如果要使用data来修改data数组,则此后如果数组不为空,则必须运行Array.splice来更新视图。如果数组为空,则最好设置imageSeries.invalidateData()。另外请记住,addData method具有第二个参数,该参数也可以从数组的开头删除项目。

另一个说明,您必须在其imageSeries.data = undefined事件中手动dispose标记工具提示。

这是一个经过更新和改进的演示,其中包括一些错误修复:

https://codepen.io/team/amcharts/pen/fee1cb6db8971ec3eff6541ad52bab6d