在amCharts 4中检索有关单击的城市的信息

问题描述 投票:0回答:1

我正在尝试实现一种类似animation along lines in 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.dataContextundefined,但是工具提示(或任何其他自定义数据)应该在此处。

也许我没有将侦听器放在正确的对象上...

该问题与this one类似,但他们提供的解决方案在我的情况下不起作用,我想这是因为我加载数据的方式。我愿意在需要时进行更改。

javascript amcharts amcharts4
1个回答
0
投票

根据AmCharts 4 (Circle),每个圈子元素都有其自己的click(点击)事件,因此,他们通过以下方式为我提供了线索:

© www.soinside.com 2019 - 2024. All rights reserved.