highcharts 海图图:检测缩放或平移

dwthyt8l  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(215)

我有一个Map,希望检测用户何时缩放或平移该Map。我知道最好的方法似乎是使用 afterSetExtremes 事件。我使用按钮进行缩放,但用户也可以双击进行缩放和平移。
虽然事件似乎没有触发,但我不确定我做错了什么,或者是否应该使用另一个事件来实现这一点。下面是一个JSFiddle,它基于一个Highmaps演示,只是添加了该事件:
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²'
        }
    }]
});
});
kh212irz

kh212irz1#

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

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

演示:https://jsfiddle.net/BlackLabel/zpn5goaj/
应用编程接口:https://api.highcharts.com/highcharts/chart.events.render

相关问题