我在AmCharts 4地图上开始新项目,我想在单击所选点时获取数据。现在我点击了事件,但我不知道如何从数组中获取数据,例如 id 和标题。
// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
//create circle/points
circle.radius = 5;
circle.fill = am4core.color("#000000");
circle.strokeWidth = 3;
circle.nonScaling = true;
circle.tooltipText = "{title}" + "{id}";
// Set prope fields
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";
// example data cities
imageSeries.data = [{
"latitude": 48.856614,
"longitude": 2.352222,
"title": "Paris",
"id": 102
}, {
"latitude": 47.856614,
"longitude": 2.352222,
"title": "second Paris",
"id": 104
}];
//click on point event
circle.events.on("hit", function(ev) {
// HERE, WHAT CAN I DO??
console.log("clicked on ", ev.target);
}, this);
那将是:
imageSeriesTemplate.events.on("hit", (ev)=>{
console.log(ev.target.dataItem.dataContext.title)
})
@VermaAman,遇到了同样的问题,并发现应该将onHit添加到圆圈中,我正在使用config,所以它看起来像这样:
{
type: "MapImageSeries",
mapImages: {
children: [
{
type: "Circle",
radius: 4,
stroke: "#somecolor",
strokeWidth: 2,
nonScaling: true,
tooltipText: "{title}",
events: {
hit: function (ev: any) {
console.log(ev.target.dataItem.dataContext);
},
},
},
],
propertyFields: {
latitude: "latitude",
longitude: "longitude",
},
},
data: areas,
},