时间戳

首页 > 解决方案 > amCharts V4 地图中的 clickMapObject 方法

amcharts - amCharts V4 地图中的 clickMapObject 方法

问题描述

我需要帮助找到一种方法来在 v4 中从 amcharts v3 复制以下功能但没有成功：

在 V3 中：map.clickMapObject(map.getObjectById('CA')); 在 V4 中：chart.METHOD???(polygonSeries.getPolygonById("CA"))

我希望在这里实现的是通过单击地图外部的元素来打开区域模式。

谢谢

标签： amcharts

解决方案

在 v4 中，您将在 上分配一个hit事件（我们的事件指南）polygonSeries.mapPolygons.template，例如：

// Open modal on click
polygonTemplate.events.on("hit", function(event) {
  // chart.closeAllPopups(); // <-- if using an amCharts Popup
  chart.openModal(
    "The id for " +
      event.target.dataItem.dataContext.name +
      " is <strong>" +
      event.target.dataItem.dataContext.id +
      "</strong>."
  );
  // if using an amCharts popup, replace openModal with openPopup
});

不确定区域模态是什么意思，所以我展示了如何在代码中使用 amCharts 的模态，并且在注释中是使用 amCharts 弹出窗口的一种方式。这是我们关于弹出窗口和模式的指南：https ://www.amcharts.com/docs/v4/concepts/popups-and-modals/

要触发事件，您可以使用对象的dispatch或dispatchImmediately方法。所以你是正确的polygonSeries.getPolygonById("CA")。它看起来像polygonSeries.getPolygonById("CA").dispatchImmediately("hit")，例如：

// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
  $button.style.display = "inline-block";
  $button.addEventListener("click", function(event) {
    event.preventDefault();
    polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
  });
});

这是一个将所有内容放在一起的演示：

https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011

让我们知道这是否有意义并且是否符合您的目标。

推荐阅读