Amcharts地图,如何设置和获取MapPolygonSeries的id



我想获得MapPolygonSeries的ID,这样我就知道点击了哪个元素。

我的目标是在下拉列表中代表选定的国家(在地图中(。

目前,我有以下代码用于点击缩放到地图区域。

// Zooming to map area on click
polygonTemplate.events.on("hit", (ev) => {
ev.target.series.chart.zoomToMapObject(ev.target, this.COUNTRY_ZOOM);
// How to get the ID of the of the map object here? ev.id?
this.handleCountrySelection();
});

为了创建多边形系列,我使用带有的am4geodata_worldHigh

useGeodata = true

从图表中。

不清楚MapPolygonSeries的ID是什么意思。

如果要提供自己的方法来标识MapPolygonSeries,可以将字符串指定给其name属性。

使用useGeodata = true,将为amCharts的geojson的系列中的每个MapPolygon提供ISO2 ID和名称。因此,如果用户单击该国家的ID/名称时您正在查找该国家的ID/名称,则可以通过mapPolygon的dataItem.dataContext在您的事件处理程序中找到,该事件处理程序看起来像ev.target.dataItem.dataContext,例如:

// identify a series by its name
polygonSeries.name = "worldSeries";
// Zooming to map area on click
polygonTemplate.events.on("hit", (ev) => {
ev.target.series.chart.zoomToMapObject(ev.target, this.COUNTRY_ZOOM);
// How to get the ID of the of the map object here? ev.id?
console.log("Series name: ", ev.target.series.name);
console.log("Country ISO2 id: ", ev.target.dataItem.dataContext.id);
console.log("Country ISO2 name: ", ev.target.dataItem.dataContext.name);
this.handleCountrySelection();
});

简单的演示将所有这些结合在一起:https://codepen.io/team/amcharts/pen/e3fd144dcf886d29d27b7f47df73f565/?editors=1111

最新更新