Карта amcharts4 не отображается в проекте Angular 8.начиная с учебного кода - PullRequest
Новая
       21

Карта amcharts4 не отображается в проекте Angular 8.начиная с учебного кода

0 голосов
/ 02 июля 2019

Я новичок в угловых и amcharts4. Мне нужно создать глобальную карту, и я тщательно следовал учебному пособию, но карта не отображается. Отображается только маленький водяной знак в нижнем углу.

map.component.html 

<div id="mapdiv" style="width: 100%; height: 500px; margin: 2px;">
</div>

map.component.ts 

import { Component, NgZone, OnInit } from '@angular/core';

import * as am4core from "@amcharts/amcharts4/core";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

import * as am4maps from "@amcharts/amcharts4/maps";

import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.less']
})
export class MapComponent implements OnInit {
    private map: am4maps.MapChart;

    constructor(private zone: NgZone) {}

    ngOnInit() {};

    ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
            let map = am4core.create("mapdiv", am4maps.MapChart);

        map.geodata = am4geodata_worldLow; 
        map.projection = new am4maps.projections.Miller();

            this.map = map;
    });
    };

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

package.json внутри угловой директории 

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --build-optimizer=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.5.3",
    "@amcharts/amcharts4-geodata": "^4.1.6",
    "@angular/animations": "~8.0.3",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "bootswatch": "^4.3.1",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

Я попытался переместить его в корневой элемент, перейти к фиксированному или процентному разделению, удалить и заново установить node_modules, проверить браузеры chrome и firefox, а также выполнить произвольную настройку в браузере, чтобы проверить видимость элементов.

Ожидаемые результаты - пустая карта мира на экране. фактические результаты - черный фон с водяным знаком

...