Amcharts4 标记 html-没有悬停事件的工具提示

Question

我正在使用 this 示例在点击时放置地图标记，我的目标是默认显示 mapMarker.tooltipHTML 元素，而不是将鼠标悬停在它们上面。欢迎使用任何替代方法，例如创建 html 标记。

Answer 1

好吧，要让 Tooltips 立即按照您想要的方式工作，需要几个步骤。首先，工具提示通常是单一的，而不是每个多边形或每个 mapImage，它们实际上在他们的系列中共享一个。所以每个人都必须使用自己的工具提示（大多数情况下，mapImage 下面是 imageSeries.mapImages.template）：

mapImage.tooltip = new am4core.Tooltip();

接下来，启用工具提示的条件（通常在悬停时）是 tooltipText 或 tooltipHTML 设置是否不是空字符串。

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

悬停时显示工具提示是默认行为，最简单的防止方法是在 mapImage:

上禁用鼠标交互

mapImage.interactionsEnabled = false;

现在，一旦创建了标记，我们将只显示工具提示：

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

默认情况下，工具提示 position 已经设置为 "fixed"，其 pointerOrientation 设置为 "vertical"，我们只需要它显示在标记上方，在这个例子是 32x32 像素，缩小了 30%，所以我们只需通过 mapImage 的 tooltipY 属性:

将它向上移动 32 * .7

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

最后但同样重要的是，工具提示不会在缩放时保持它们的位置，因此我们必须通过监听缩放变化、将地图图像的 lat/long 坐标转换为图表 x/y 坐标，并将其传递给每个工具提示：

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)});
  });
});

这是一个演示：

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

附录 (2019-04-11):

您也可以 bind the latitude/longitude properties to data 并通过 addData 方法创建 mapImages，例如

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,
  });
});

如果您想从 data 数组的开头删除标记，请使用 removeData method. If you want to modify the data array using Array.splice, if the array is not empty afterwards, you'll have to run imageSeries.invalidateData() to update the view. If the array will be empty, it's better to just set imageSeries.data = undefined instead. Also keep in mind the addData method 的第二个参数，该参数也会从数组的开头删除项目。

另外请注意，您必须在 "beforedisposed" 事件中手动 dispose 标记工具提示。

这是一个更新和改进的演示，其中包含一些错误修复：

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

Amcharts4 标记 html-没有悬停事件的工具提示

Amcharts4 marker html-tooltips without hover event

amcharts

typescript

angular

amcharts4

附录 (2019-04-11):