我如何使用 Angular 9 中的 'polygonTemplate.tooltipText' 将剩余 api 数据绑定并显示到 amcharts4 地理地图？

Question

我正在尝试使用 Angular 中的 amcharts4 地理地图可视化 covid19 数据 - 类似于此 demo

但更喜欢只使用悬停在地图中显示数据（不需要时间轴）- 使用 'polygonSeries.tooltipText' 而不是气泡。这是我的 api 来源 Rest Api

我在工具提示中得到的只是名称，但没有确认案例值。截图geomaps

生成的服务工作正常
休息api数据很好

这是我在geomaps.component.ts

中使用的

import { Component, OnInit, NgZone, AfterViewInit } from '@angular/core';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
import { MapServiceService } from '../service/map-service.service';
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

@Component({
  selector: 'app-geomaps',
  templateUrl: './geomaps.component.html',
  styleUrls: ['./geomaps.component.css']
})

export class GeomapsComponent implements OnInit, AfterViewInit {
  public caseData = [];

  private mapChart: am4maps.MapChart;

  constructor(private zone: NgZone, private mapsService: MapServiceService) { }

  // Inject NgZone service and add ngAfterViewInit method which will create our chart
  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {

      // Declare our chart to display to html id='chartdiv' map instance
      let mapChart = am4core.create("chartdiv", am4maps.MapChart);

      // Low-detail map - set map definition
      mapChart.geodata = am4geodata_worldLow;

      // set projection
      mapChart.projection = new am4maps.projections.Miller();

      //  polygon represented by objects map areas (defines how country look and behave)
      let polygonSeries = mapChart.series.push(new am4maps.MapPolygonSeries());
      polygonSeries.data = this.caseData; // Our case data
      polygonSeries.useGeodata = true;

      // Bind our properties to data
      // polygonSeries.data = 
      // [{
      //   "id": "US",
      //   "name": "United States",
      //   "value": 100,
      //   "fill": am4core.color("#F05C5C")
      // }, {
      //   "id": "FR",
      //   "name": "France",
      //   "value": 50,
      //   "fill": am4core.color("#5C5CFF")
      // }];

      // configure series
      let polygonTemplate = polygonSeries.mapPolygons.template;
      polygonTemplate.tooltipText = "{name}: {value}"; // TooltipText
      polygonTemplate.fill = am4core.color("#74B266");

      // Create hover state and set alternative fill color
      let hs = polygonTemplate.states.create("hover");
      hs.properties.fill = am4core.color("#003399");

      // Exclude antartica iso-2="AQ"
      polygonSeries.exclude = ["AQ"];

      mapChart.smallMap = new am4maps.SmallMap();
      mapChart.smallMap.series.push(polygonSeries);

    });
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.mapChart) {
        this.mapChart.dispose();
      }
    });
  }

  ngOnInit() {
    this.getCasesData();
  }

  getCasesData() {
    this.mapsService.getAll().subscribe(data => {
      for (const d of (data as any)) {
        this.caseData.push({
          id: d.iso2,
          name: d.countryRegion,
          provinceState: d.provinceState,
          value: d.confirmed
        });
      }
      console.log(this.caseData);
      // return this.caseData;
    });
  }
}

控制台记录getCasesData时，我的结果return如下：

[0 … 99]
    0: {multiPolygon: Array(1), id: "TV", madeFromGeoData: true, name: "Tuvalu"}
    1: {multiPolygon: Array(1), id: "BV", madeFromGeoData: true, name: "Bouvet Island"}...

再往下看：

[300 … 399]
    300: {id: "SA", name: "Saudi Arabia", provinceState: null, value: 900}
    301: {id: "FI", name: "Finland", provinceState: null, value: 880}
    302: {id: "US", name: "US", provinceState: "Michigan", value: 876}...

我感谢任何能为我指明正确方向的人。谢谢

Answer 1

设法解决此问题：问题是 'getCasesData()' 在 'ngAfterViewInit()' 之外运行单独运行。我犯的非常愚蠢的错误

重构代码：

 // Inject NgZone service and add ngAfterViewInit method which will create our chart
  ngAfterViewInit() {
  }

 // Insert function here
  getCasesData() {
    this.mapsService.getAll().subscribe(data => {
    this.tempData = data;
    this.tempData.forEach(values => {
      this.caseData.push({
        id: values.iso2,
        name: values.countryRegion,
        longitude: values.long,
        latitude: values.lat,
        value: values.confirmed
      });
    });
    console.log(this.caseData);

    // Running inside our function to get Data, otherwise it will return 'undefined'
    this._zone.runOutsideAngular(() => {

      // Declare our chart to display to html id='chartdiv' map instance
      let mapChart = am4core.create("chartdiv", am4maps.MapChart);

      // Low-detail map - set map definition
      mapChart.geodata = am4geodata_worldLow;

      // set projection
      mapChart.projection = new am4maps.projections.Miller();

      //  polygon represented by objects map areas (defines how country look and behave)
      let polygonSeries = mapChart.series.push(new am4maps.MapPolygonSeries());

      // polygonSeries.data = this.caseData;  
      polygonSeries.useGeodata = true;

      // Bind our properties to data
      polygonSeries.data = this.caseData;

      // configure series
      let polygonTemplate = polygonSeries.mapPolygons.template;

      polygonTemplate.tooltipText = "{name} confirmed cases: {value}";
      polygonTemplate.fill = am4core.color("#74B266");
      polygonTemplate.propertyFields.fill = "fill";

      // Create hover state and set alternative fill color
      let hs = polygonTemplate.states.create("hover");
      hs.properties.fill = am4core.color("#003399");

      // Exclude antartica iso-2="AQ"
      polygonSeries.exclude = ["AQ"];
      polygonSeries.calculateVisualCenter = true;

    });

  });
  }

  ngOnDestroy() {
    this._zone.runOutsideAngular(() => {
      if (this.mapChart) {
        this.mapChart.dispose();
      }
    });
  }

  ngOnInit() {
    this.getCasesData(); // On initialise
  }

如果有人有更好的解决方案，尤其是在使用 Angular 8+ 解析更大的剩余 api 数据集时，请告诉我。谢谢

我如何使用 Angular 9 中的 'polygonTemplate.tooltipText' 将剩余 api 数据绑定并显示到 amcharts4 地理地图？

How do i bind & display rest api data to amchart4 geo maps using 'polygonTemplate.tooltipText' in Angular 9?

maps

amcharts

typescript

angular

amcharts4