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

Question

我正在尝试实现类似 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.dataContext 是 undefined，但是，工具提示（或任何其他自定义数据）应该在某处。

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

问题类似于this one，但他们提供的解决方案对我的情况不起作用，我猜是因为我加载数据的方式。如果需要，我愿意更改它。

Answer 1

根据AmCharts 4 (Circle)，每个圆圈元素都有自己的点击（命中）事件，所以他们给了我线索：

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

监听变量 city 本身的事件也有效：

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

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

Retrieve information on clicked city in amCharts 4

javascript

amcharts

amcharts4