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

Question

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

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

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

• 生成的服务效果很好
• 获取REST 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时，我的结果返回如下：

[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+解析更多的REST API数据集，请告诉我。谢谢

Answer 2

我是Stackoverflow的新手，无法添加评论。我正在做一个类似的项目，并且非常困惑在服务中添加api源。您能否分享有关如何在地图服务中获取api源的经验。

提前谢谢您