如何使用角度9中的“amchart4”绑定和显示rest数据到polygonTemplate.tooltipText地理映射？
如何使用角度9中的“amchart4”绑定和显示rest数据到polygonTemplate.tooltipText地理映射？
提问于 2020-03-25 14:33:41
我试图用covid19地形图在角度上可视化amcharts4数据--类似于这个演示
但更倾向于只使用悬停来显示地图中的数据(没有必要使用时间线)--使用“polygonSeries.tooltipText”而不是气泡。这是我的api源休息阿皮
我在工具提示中得到的只是名称，但没有确认的案例值。截图风水
- 生成的服务很好
- 获取rest数据很好
这是我在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}...我很感激任何能为我指明正确方向的人。谢谢
Stack Overflow用户
回答已采纳
发布于 2020-03-31 11:02:55
设法解决了这个问题:问题是'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
}如果有人有更好的解决方案，特别是解析更大的rest数据集w/ 8+，请告诉我。谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60850999
复制相关文章
相似问题
腾讯云开发者
