可能是因为数据格式错误或未正确设置地图区域ID。以下是一个使用amCharts5和JSON格式的示例代码,可以帮助解决此问题:
import * as am5 from "@amcharts/amcharts5";
import * as am5maps from "@amcharts/amcharts5/maps";
import am5geodata_usaLow from "@amcharts/amcharts5-geodata/usaLow";
// 创建地图实例
const chart = am5.create("chartdiv", am5maps.MapChart);
// 设置地图区域数据
chart.set("geodata", am5geodata_usaLow);
// 将地图区域ID设置为州名
chart.get("geodata")?.getFeatureById("US-CA")?.set("id", "California");
chart.get("geodata")?.getFeatureById("US-NY")?.set("id", "New York");
// 创建地图区域对象
const polygonSeries = chart.series.push(new am5maps.MapPolygonSeries());
const polygonTemplate = polygonSeries.mapPolygons.template;
// 设置区域颜色样式
polygonTemplate.propertyFields.fill = "color";
polygonTemplate.fill = am5.color("#74B266");
polygonTemplate.stroke = am5.color("#ffffff");
// 向区域添加数据
polygonSeries.data = [{
id: "California",
value: 3546
}, {
id: "New York",
value: 6578
}];
// 更新地图
chart.set("geodata", chart.get("geodata"));
在此示例中,我们首先设置了地图区域数据 am5geodata_usaLow,然后将地图区域ID设置为州名,并创建了一个 MapPolygonSeries 对象来渲染地图区域。最后,我们使用 chart.set("geodata", chart.get("geodata")) 来更新地图,确保所有地图区域正确显示。