Получить информацию о кликнувшем городе в amCharts 4 - PullRequest
Новая
       19

Получить информацию о кликнувшем городе в amCharts 4

0 голосов
/ 22 апреля 2020

Я пытаюсь реализовать что-то вроде анимации вдоль линий в amCharts 4 . Я изо всех сил пытаюсь получить выбранный город (am4core.Circle), он отображает информацию всплывающей подсказки при наведении, однако я не могу получить данные при нажатии на элемент.

Вот как я добавляю города на свою карту: 

//SetImageSeries()
let imageSeries = mapChart.series.push(new am4maps.MapImageSeries());
imageSeries.mapImages.template.propertyFields.longitude = `longitude`;
imageSeries.mapImages.template.propertyFields.latitude = `latitude`;
imageSeries.mapImages.template.propertyFields.url = `url`;

//AddCities
let cities = mapChart.series.push(new am4maps.MapImageSeries());
cities.mapImages.template.nonScaling = true;
cities.tooltip.background.strokeWidth = 0;
cities.cursorOverStyle = am4core.MouseCursorStyle.pointer;

let city = cities.mapImages.template.createChild(am4core.Circle);
city.radius = 10;
city.fill = am4core.color(`#d4a259`);

const addCity = (coords, title) => {
  let city = cities.mapImages.create();
  city.latitude = coords.latitude;
  city.longitude = coords.longitude;
  city.tooltipText = title;
  city.name = title;

  return city;
};

let genova = addCity({ 'latitude': 44.4056, 'longitude': 8.9463 }, `Genova`);
let amman = addCity({ 'latitude': 31.9539, 'longitude': 35.9106 }, `Amman`);
let sydney = addCity({ 'latitude': -33.8688, 'longitude': 151.2093 }, `Sydney`);
let london = addCity({ 'latitude': 51.5074, 'longitude': -.1278 }, `London`);
let barcelona = addCity({ 'latitude': 41.3851, 'longitude': 2.1734 }, `Barcelona`);

И вот что я пытаюсь получить: 

cities.events.on(`hit`, element => {
  console.log(element.target.dataItem);
  console.log(element.target.dataItem.dataContext);
});

element.target.dataItem.dataContext - это undefined однако подсказка (или любые другие пользовательские данные) должна быть где-то там.

Возможно, я не помещаю слушателя в правильный объект ...

Проблема похожа на эту , но их решение не работает в моем случае и я думаю, это из-за моего способа загрузки данных. Я открыт, чтобы изменить его при необходимости.

1 Ответ

0 голосов
/ 27 апреля 2020

Согласно AmCharts 4 (Круг) каждый элемент круга имеет свое собственное событие щелчка (удара), поэтому они дали мне подсказку по: 

chart.seriesContainer.events.on("hit", function(ev) {
  console.log(ev.target.baseSprite);
});

Итак, вы можете добавить любое пользовательское значение с использованием city.customValue=value и извлечение с использованием: 

cities.events.on(`hit`, element => {
  console.log(element.target.customValue);
});

Прослушивание события в самой переменной города также работает: 

aman.events.on(`hit`, element => {
  console.log(element.target.customValue);
});
...