如何缩放到高图中的特定点

Highmaps / highcharts 是一个 javascript/jquery 适配器，可在浏览器等中呈现地图。

我有一张突出显示单个国家/地区的地图，但是，（世界）地图的比例如此之大，因此我想在将地图加载到相关国家/地区后进行放大。

看看 API，我确信这是可能的。

有一个事件监听器，这样我就可以在加载时执行自定义函数。如本示例所示，在负载上添加一个系列 (杰斯小提琴 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/maps/chart/events-load/)

另外还有一个方法mapZoom允许您使用以下参数指定要缩放到的点：

mapZoom（数量多少，[数量中心X]，[数量中心Y]，[数量鼠标X]，[数量鼠标Y]）

但是当我尝试调用此方法 onload （我的代码尝试如下，JS fiddlehere http://jsfiddle.net/8rgtuhbn/）， 什么都没发生。

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {

        // Assign id's
        $.each(data, function () {
            this.id = this.code;
        });

        // Initiate the chart
        $('#container').highcharts('Map', {
            chart: {
                events: {
                    load: function () {
                    mapZoom(0.5, 100, 100);
                    }
                }
            },
            title: {
                text: 'Zoom on load attempt'
            },


            legend: {
                title: {
                    text: 'Population density per km²'
                }
            },

            colorAxis: {
                min: 1,
                max: 1000,
                type: 'logarithmic'
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series : [{
                data : data,
                mapData: Highcharts.maps['custom/world-highres'],
                joinBy: ['iso-a2', 'code'],
                name: 'Population density',
                allowPointSelect: true,
                cursor: 'pointer',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                tooltip: {
                    pointFormat: '{point.id} {point.name}',
                    valueSuffix: '/km²'
                }
            }]
        });

    });
});

mapZoom是一个属于chart对象 so，以便将其称为 en 事件 (load），你必须使用它来调用它this关键词。

您可以像这样编辑代码（JSFiddle http://jsfiddle.net/8rgtuhbn/1/):

...
events: {
    load: function () {
        this.mapZoom(0.5, 100, 100);
        }
    }
}
...

或者，您可以随时使用 jQuery 引用来调用它（JSFiddle http://jsfiddle.net/8rgtuhbn/2/):

$('#container').highcharts().mapZoom(0.5, 100, 100);