我对HightChart完全陌生。我有一个要求，我必须在Angular中使用HightCharts创建一个地理热图。在做了一些谷歌搜索后，我能够创建一个图表，但我得到了一个错误。检查Error。下面是我的函数，我正在初始化地理热图图表。
initHeatMap(topology: any, Highcharts: any, div: string,): void {
let minColor: any;
let maxColor: any
let minValue = 1;
let maxValue = 10;
if (Highcharts?.getOptions()?.colors) {
minColor = Highcharts.getOptions().colors?.[0] || '#615E9B';
}
if (Highcharts?.getOptions()?.colors) {
maxColor = Highcharts.getOptions().colors?.[1] || '#00e272';
}
Highcharts.mapChart(div, {
chart: {
map: topology,
type:'geoheatmap'
},
title: {
text: 'Geo Heatmap',
align: 'left'
},
subtitle: {
text: 'HighChart Geo Heatmap',
align: 'left'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
},
enableButtons: true,
enableMouseWheelZoom: true
},
// xAxis: {
// type: 'linear'
// },
// yAxis: {
// type: 'linear'
// },
colorAxis: {
min: 0,
stops: [
[0, '#00ff00'], // Low intensity color
[0.5, '#ffff00'], // Medium intensity color
[1, '#ff0000'] // High intensity color
]
},
series: [{
name: 'Heatmap',
keys: ['hc-key', 'value'],
joinBy: 'hc-key',
data: this.getData(),
// mapData: Highcharts.maps[this.customMap],
mapData: topology,
states: {
hover: {
color: minColor
}
},
tooltip: {
pointFormat: '{points.name}: {point.value}'
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
// type: 'geoheatmap'
}]
});
}封装Json：
"dependencies": {
"@angular/animations": "~15.2.9",
"@angular/cdk": "^14.1.2",
"@angular/common": "~15.2.9",
"@angular/compiler": "~15.2.9",
"@angular/core": "~15.2.9",
"@angular/forms": "~15.2.9",
"@angular/localize": "~15.2.9",
"@angular/platform-browser": "~15.2.9",
"@angular/platform-browser-dynamic": "~15.2.9",
"@angular/router": "~15.2.9",
"@ng-bootstrap/ng-bootstrap": "^14.2.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@types/googlemaps": "^3.43.3",
"alertifyjs": "^1.13.1",
"angular-datatables": "^15.0.1",
"angular-ng-autocomplete": "^2.0.12",
"angular-plotly.js": "^4.0.4",
"bootstrap": "^5.3.0",
"core-js": "^3.25.5",
"datatables-fixedcolumns": "^3.1.0",
"datatables.net": "^1.12.1",
"datatables.net-dt": "^1.12.1",
"datatables.net-select": "^1.4.0",
"datatables.net-select-dt": "^1.4.0",
"echarts": "^5.4.2",
"highcharts": "^11.1.0",
"highcharts-angular": "^3.1.2",
"highcharts-custom-events": "^3.0.10",
"@highcharts/map-collection": "^2.0.1",
"jspdf": "^2.5.1",
"jwt-decode": "^3.1.2",
"leaflet": "^1.9.4",
"moment-timezone": "^0.5.34",
"ng-http-loader": "^12.0.0",
"ng-sidebar": "^9.4.2",
"ngx-chips": "^3.0.0",
"ngx-dropzone": "^3.1.0",
"ngx-echarts": "^14.0.0",
"ngx-summernote": "^0.8.9",
"plotly.js-dist-min": "^2.14.0",
"primeicons": "^5.0.0",
"primeng": "^15.4.1",
"rxjs": "~7.5.6",
"summernote": "^0.8.20",
"uuid": "^9.0.1",
"xlsx": "^0.18.5",
"yarn": "^1.22.19",
"zone.js": "^0.11.8"}
如果你能提供帮助我会很高兴的，先谢谢你。
2条答案
按热度按时间w6mmgewl1#
如果你想在Angular中使用Highcharts，最好使用官方 Package 器：https://github.com/highcharts/highcharts-angular
www.example.com中有一个部分README.md解释了如何使用这些模块：https://github.com/highcharts/highcharts-angular#to-load-a-module
简而言之，你应该导入一个给定的模块并初始化它：
Demo：https://stackblitz.com/edit/highcharts-map-geoheatmap-angular
3zwtqj6y2#
在进行了一些研究和咨询谷歌后，我找到了一个解决我的问题的方法，这也可能会使其他人受益。我没有使用HighCharts库，而是选择Google Visualization [Heatmap Layer][1] [Heatmap Using JavaScript][2]
Heatmap Layer是google.maps.visualization库的一部分，默认情况下不会加载。可视化类是一个独立的库，独立于主MapJavaScript API代码。要使用此库中包含的功能，必须首先使用Maps JavaScript API引导URL中的libraries参数加载此库：
仅此而已我可以在Google Map中使用Geo JSON创建热图[1]：https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap [2]：https://developers.google.com/maps/documentation/javascript/using-typescript