世界地图未显示 - 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
}
}
我正在尝试显示 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
}
}