Метод clickMapObject в картах amCharts V4 - PullRequest
Новая
       5

Метод clickMapObject в картах amCharts V4

0 голосов
/ 23 ноября 2018

Мне нужна рука, чтобы найти способ репликации следующих функций из amcharts v3 в v4 без успеха:

В V3: map.clickMapObject (map.getObjectById ('CA'));В V4: chart.METHOD ??? (polygonSeries.getPolygonById ("CA"))

Здесь я хочу добиться того, чтобы открыть модальную область, щелкнув элемент вне карты.

Спасибо

1 Ответ

0 голосов
/ 27 ноября 2018

В 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

Дайте нам знать, если этоимеет смысл и соответствует тому, что вы хотели сделать.

...