世界地图未显示 - Angular Highcharts

world map not displaying - Angular Highcharts

我正在尝试显示 worldMap Highcharts。我按照这个例子 stackblitz Highcharts Angular

它在哪里工作正常。但是当尝试在本地 运行 示例时,它会显示缩放按钮和图例,但没有地图并且控制台中没有错误。但是,当单击缩放按钮时,出现此错误:

attribute transform: Expected number, "…late(0,0) scale(NaN NaN)"

代码如下:

globalMap TS 文件

import { Component } from '@angular/core';
import * as Highcharts from "highcharts/highmaps";
import * as worldMap from "@highcharts/map-collection/custom/world.geo.json";
@Component({
    selector: 'app-global-map',
    templateUrl: 'global-map.page.html',
    styleUrls: ['global-map.page.scss']
})
export class globalMap {
    Highcharts: typeof Highcharts = Highcharts;
    chartConstructor = "mapChart";
    chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
    chartOptions: Highcharts.Options = {
        chart: {
            map: worldMap
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                alignTo: "spacingBox"
            }
        },
        legend: {
            enabled: true
        },
        colorAxis: {
            min: 0
        },
        series: [
            {
                type: "map",
                name: "Random data",
                states: {
                    hover: {
                        color: "#BADA55"
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: "{point.name}"
                },
                allAreas: false,
                data: [
                    ["fo", 0],
                    ["um", 1],
                    ["us", 2],
                    ["jp", 3],
                    ["sc", 4],
                    ["in", 5],
                    ["fr", 6],
                    ["fm", 7],
                    ["cn", 8],
                    ["pt", 9],
                    ["sw", 10],
                    ["sh", 11],
                    ["br", 12],
                    ["ki", 13],
                    ["ph", 14],
                    ["mx", 15],
                    ["es", 16],
                    ["bu", 17],
                    ["mv", 18],
                    ["sp", 19],
                    ["gb", 20],
                    ["gr", 21],
                    ["as", 22],
                    ["dk", 23],
                    ["gl", 24],
                    ["gu", 25],
                    ["mp", 26],
                    ["pr", 27],
                    ["vi", 28],
                    ["ca", 29],
                    ["st", 30],
                    ["cv", 31],
                    ["dm", 32],
                    ["nl", 33],
                    ["jm", 34],
                    ["ws", 35],
                    ["om", 36],
                    ["vc", 37],
                    ["tr", 38],
                    ["bd", 39],
                    ["lc", 40],
                    ["nr", 41],
                    ["no", 42],
                    ["kn", 43],
                    ["bh", 44],
                    ["to", 45],
                    ["fi", 46],
                    ["id", 47],
                    ["mu", 48],
                    ["se", 49],
                    ["tt", 50],
                    ["my", 51],
                    ["pa", 52],
                    ["pw", 53],
                    ["tv", 54],
                    ["mh", 55],
                    ["cl", 56],
                    ["th", 57],
                    ["gd", 58],
                    ["ee", 59],
                    ["ag", 60],
                    ["tw", 61],
                    ["bb", 62],
                    ["it", 63],
                    ["mt", 64],
                    ["vu", 65],
                    ["sg", 66],
                    ["cy", 67],
                    ["lk", 68],
                    ["km", 69],
                    ["fj", 70],
                    ["ru", 71],
                    ["va", 72],
                    ["sm", 73],
                    ["kz", 74],
                    ["az", 75],
                    ["tj", 76],
                    ["ls", 77],
                    ["uz", 78],
                    ["ma", 79],
                    ["co", 80],
                    ["tl", 81],
                    ["tz", 82],
                    ["ar", 83],
                    ["sa", 84],
                    ["pk", 85],
                    ["ye", 86],
                    ["ae", 87],
                    ["ke", 88],
                    ["pe", 89],
                    ["do", 90],
                    ["ht", 91],
                    ["pg", 92],
                    ["ao", 93],
                    ["kh", 94],
                    ["vn", 95],
                    ["mz", 96],
                    ["cr", 97],
                    ["bj", 98],
                    ["ng", 99],
                    ["ir", 100],
                    ["sv", 101],
                    ["sl", 102],
                    ["gw", 103],
                    ["hr", 104],
                    ["bz", 105],
                    ["za", 106],
                    ["cf", 107],
                    ["sd", 108],
                    ["cd", 109],
                    ["kw", 110],
                    ["de", 111],
                    ["be", 112],
                    ["ie", 113],
                    ["kp", 114],
                    ["kr", 115],
                    ["gy", 116],
                    ["hn", 117],
                    ["mm", 118],
                    ["ga", 119],
                    ["gq", 120],
                    ["ni", 121],
                    ["lv", 122],
                    ["ug", 123],
                    ["mw", 124],
                    ["am", 125],
                    ["sx", 126],
                    ["tm", 127],
                    ["zm", 128],
                    ["nc", 129],
                    ["mr", 130],
                    ["dz", 131],
                    ["lt", 132],
                    ["et", 133],
                    ["er", 134],
                    ["gh", 135],
                    ["si", 136],
                    ["gt", 137],
                    ["ba", 138],
                    ["jo", 139],
                    ["sy", 140],
                    ["mc", 141],
                    ["al", 142],
                    ["uy", 143],
                    ["cnm", 144],
                    ["mn", 145],
                    ["rw", 146],
                    ["so", 147],
                    ["bo", 148],
                    ["cm", 149],
                    ["cg", 150],
                    ["eh", 151],
                    ["rs", 152],
                    ["me", 153],
                    ["tg", 154],
                    ["la", 155],
                    ["af", 156],
                    ["ua", 157],
                    ["sk", 158],
                    ["jk", 159],
                    ["bg", 160],
                    ["qa", 161],
                    ["li", 162],
                    ["at", 163],
                    ["sz", 164],
                    ["hu", 165],
                    ["ro", 166],
                    ["ne", 167],
                    ["lu", 168],
                    ["ad", 169],
                    ["ci", 170],
                    ["lr", 171],
                    ["bn", 172],
                    ["iq", 173],
                    ["ge", 174],
                    ["gm", 175],
                    ["ch", 176],
                    ["td", 177],
                    ["kv", 178],
                    ["lb", 179],
                    ["dj", 180],
                    ["bi", 181],
                    ["sr", 182],
                    ["il", 183],
                    ["ml", 184],
                    ["sn", 185],
                    ["gn", 186],
                    ["zw", 187],
                    ["pl", 188],
                    ["mk", 189],
                    ["py", 190],
                    ["by", 191],
                    ["cz", 192],
                    ["bf", 193],
                    ["na", 194],
                    ["ly", 195],
                    ["tn", 196],
                    ["bt", 197],
                    ["md", 198],
                    ["ss", 199],
                    ["bw", 200],
                    ["bs", 201],
                    ["nz", 202],
                    ["cu", 203],
                    ["ec", 204],
                    ["au", 205],
                    ["ve", 206],
                    ["sb", 207],
                    ["mg", 208],
                    ["is", 209],
                    ["eg", 210],
                    ["kg", 211],
                    ["np", 212]
                ]
            }
        ]
    };
 }
};

globalMap html 文件

<highcharts-chart
id="container" 
[Highcharts]="Highcharts"
[constructorType]="chartConstructor"
[options]="chartOptions"
 style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

依赖关系

"dependencies": {
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor/android": "^2.4.6",
    "@capacitor/core": "2.4.6",
    "@highcharts/map-collection": "^1.1.3",
    "@ionic/angular": "^5.5.2",
    "flag-icon-css": "^3.5.0",
    "highcharts": "^9.0.1",
    "highcharts-angular": "^2.10.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "~11.1.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "2.4.6",
    "@ionic/angular-toolkit": "^3.1.0",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },

找到解决方案,因为我将 mapData 键的值设置为 json 对象 这是我从这个 link https://code.highcharts.com/mapdata/ 复制的 (此处复制 geoJson 文件的数据,即各自的地图数据 state/country 你想要的)。现在图表对象看起来像下面的代码,

{
  series: [{
    data: this.mapChartItem.data,
    mapData: this.mapDataJson,
    joinBy: 'hc-key',
    name: 'Orders For',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
     }
    }
  }

此处this.mapDataJson将是geoJson文件数据的数据

问题似乎出在我导入 highcarts 库的方式上。所以我删除了 * as 并将其更改为:

import Highcharts from "highcharts/highmaps";
import worldMap from "@highcharts/map-collection/custom/world.geo.json";

为此,我更改了 tsconfig.json 文件以接受更改,您可以使用下面的 tsconfig.json 文件。

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}