AmCharts 4 - 钻取地图 - 获取国家ISO代码
创始人
2024-09-30 05:01:14
0

要获取国家ISO代码,您可以使用AmCharts 4的钻取地图功能和其提供的数据源。

以下是一个使用AmCharts 4获取国家ISO代码的示例代码:

首先,您需要确保已经包含了AmCharts 4的库文件:





然后,您可以创建一个包含钻取地图的div元素,并为其指定一个唯一的ID,以便您可以在代码中引用它:


接下来,您可以使用以下JavaScript代码创建一个AmCharts 4地图实例,并设置数据源和配置选项:

// 创建地图实例
var chart = am4core.create("chartdiv", am4maps.MapChart);

// 使用worldLow地图数据
chart.geodata = am4geodata_worldLow;

// 设置地图投影
chart.projection = new am4maps.projections.Miller();

// 创建地图系列
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// 设置地图多边形的数据源
polygonSeries.useGeodata = true;

// 配置地图多边形的外观
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name} ({id})";
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.stroke = am4core.color("#FFFFFF");

// 添加点击事件处理程序
polygonTemplate.events.on("hit", function(ev) {
  // 获取国家对象
  var country = ev.target.dataItem.dataContext;
  
  // 获取国家ISO代码
  var isoCode = country.id;
  
  // 在控制台中打印国家ISO代码
  console.log(isoCode);
});

// 刷新地图
chart.invalidateData();

在上面的示例中,当您点击地图上的任何国家时,会在控制台中输出国家的ISO代码。

请注意,您需要将上述代码放在页面的