要在AmCharts4和Angular中显示多边形(国家),您需要遵循以下步骤:
npm install @amcharts/amcharts4 --save
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
export class AppComponent implements OnInit {
private chart: am4maps.MapChart;
ngOnInit() {
this.chart = am4core.create("chartdiv", am4maps.MapChart);
this.chart.geodata = am4geodata_worldLow;
this.chart.projection = new am4maps.projections.Miller();
this.chart.homeZoomLevel = 1;
this.chart.homeGeoPoint = {
latitude: 0,
longitude: 0
};
let polygonSeries = this.chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
let polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#74B266");
let hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
this.chart.zoomControl = new am4maps.ZoomControl();
}
}
确保将容器的宽度和高度设置为您需要的尺寸。
请注意,上述代码只是一个简单的示例,您可以根据您的需求进行自定义和修改。