问题描述
我正在尝试显示 worldMap Highcharts。我跟着这个例子stackblitz Highcharts Angular
它工作正常的地方。但是当尝试在本地运行示例时，它会显示缩放按钮和图例，但没有地图并且控制台中没有错误。但是，当单击缩放按钮时出现此错误：
属性变换：预期数，“…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 对象 我从这个链接复制的 https://code.highcharts.com/mapdata/ （这里复制 geoJson 文件的数据，即各自的地图数据 您想要的州/国家）。现在图表对象将如下面的代码所示，
{
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
}
}