如何使用AMCharts 4 Maps设置加拿大省份的颜色

我想用amCharts展示加拿大地图，让指定省份与其他省份呈现不同颜色。这套逻辑在世界地图选中国家着色时可正常运行，但移植到加拿大省份设置上完全失效，所有省份都显示为同一种颜色。

我的代码 #

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

// 设置地图定义
chart.geodata = am4geodata_canadaLow;

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

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

// 从GeoJSON加载多边形数据（如省份名称）
polygonSeries.useGeodata = true;

// 配置系列模板
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#74B266");

// 创建悬停状态并设置替代填充色
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

// 添加数据
polygonSeries.data = [{
  "id": "ON",
  "name": "Ontario",
  "value": 100,
  "fill": am4core.color("#F05C5C")
}, {
  "id": "QC",
  "name": "Quebec",
  "value": 50,
  "fill": am4core.color("#5C5CFF")
}];

// 将"fill"属性绑定到数据中的"fill"字段
polygonTemplate.propertyFields.fill = "fill";

当前效果 #

问题原因与解决方法 #

核心问题 #

am4geodata_canadaLow地理数据中，省份的默认匹配ID是带国家前缀的格式（如CA-ON、CA-QC），但代码中用的是不带前缀的ON、QC，导致数据无法和地理图形匹配，着色规则不生效。另外，数据中直接传入am4core.color()对象也不符合propertyFields的规范。

解决方法（二选一即可） #

方法1：修改数据ID为带前缀格式

将数据中的id字段改为地理数据对应的带前缀格式：

polygonSeries.data = [{
  "id": "CA-ON",
  "name": "Ontario",
  "value": 100,
  "fill": "#F05C5C"
}, {
  "id": "CA-QC",
  "name": "Quebec",
  "value": 50,
  "fill": "#5C5CFF"
}];

方法2：指定匹配的字段为省份代码

am4geodata_canadaLow的省份数据中包含code字段（值为不带前缀的ON、QC），只需修改polygonSeries的匹配字段：

// 在polygonSeries.useGeodata = true之后添加这行
polygonSeries.idField = "code";

// 数据保持原有格式，同时把fill改为字符串格式
polygonSeries.data = [{
  "id": "ON",
  "name": "Ontario",
  "value": 100,
  "fill": "#F05C5C"
}, {
  "id": "QC",
  "name": "Quebec",
  "value": 50,
  "fill": "#5C5CFF"
}];

补充说明 #

不要在数据中直接使用am4core.color()创建颜色对象，直接传入十六进制颜色字符串即可，propertyFields.fill会自动处理为颜色对象，避免潜在的序列化问题。

内容的提问来源于stack exchange，提问作者Adam