Highcharts地图:检测缩放或平移



我有一个地图,每当用户缩放或平移时,我都想检测它。我知道最好的方法似乎是在SetExtremes事件之后。我使用按钮进行缩放,但用户也可以双击放大和平移。

虽然这个活动似乎没有启动,但我不确定我做错了什么,也不确定我是否应该利用另一个活动来实现这一点。这是一个基于Highmaps演示的JSFiddle,只添加了一个事件:

https://jsfiddle.net/nbymstxe/

我做错了什么?

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json', function (data) {
// Prevent logarithmic errors in color calulcation
data.forEach(function (p) {
p.value = (p.value < 1 ? 1 : p.value);
});
// Initialize the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world'
},
title: {
text: 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
events: {
afterSetExtremes() {
console.log("Extremes set");
}
},
},
series: [{
data: data,
joinBy: ['iso-a3', 'code3'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});

我认为您可以使用render回调来检测用户何时缩放或平移图表。

events: {
render() {
console.log(this.mapView)
}
}

演示:https://jsfiddle.net/BlackLabel/zpn5goaj/

API:https://api.highcharts.com/highcharts/chart.events.render

最新更新