У меня есть эта проблема при масштабировании с помощью колесика мыши. Карта показывает правильно. Но когда я пытаюсь увеличить или уменьшить масштаб, вместо увеличения отображается карта более яркая или менее яркая.
Я использую
"@angular/core": "~7.2.3",
"@types/highcharts": "^5.0.36",
"highcharts": "^7.0.2",
"highcharts-angular": "^2.4.0"
Я пытался понизить версию, с теми же результатами.
Это параметры карты:
const mapWorld = require('@highcharts/map-collection/custom/world.geo.json');
this.dataSize = {
width: 450,
height: 280
};
this.chartMap = {
chart: {
map: mapWorld,
height: this.dataSize.height,
width: this.dataSize.width
},
credits: {
enabled: false
},
title: {
style: {
'text-transform': 'uppercase',
'font-family': '"Roboto", sans-serif',
'font-size': '20px',
'font-weight': 'bold'
},
align: 'left',
text: this.translate.instant(this.title)
},
tooltip: {
headerFormat: ''
},
legend: {
enabled: false
},
xAxis: {
minRange: 0.1
},
mapNavigation: {
enabled: true,
enableButtons: false,
enableMouseWheelZoom: true,
enableDoubleClickZoom: false
},
colorAxis: {
min: 0,
minColor: '#43aa98',
maxColor: '#43aa98'
},
series: [{
states: {
hover: {
color: '#008a73'
}
},
animation: true,
dataLabels: {
enabled: false
},
allAreas: true,
data: this.mapData
} as Highcharts.SeriesMapOptions]
};
в HTML
highcharts-chart [Highcharts]="Highcharts" [constructorType]="'mapChart'" [options]="chartMap"
Я не знаю, что происходит. Некоторые идеи?
Спасибо!