如何在 highcharts highmaps 中添加箭头导航器

Question

highcharts 只提供放大/缩小按钮，如何添加箭头导航？

此示例使用饼图来介绍使用颜色的导航器：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/navigation/

当我查看导航器的技术时，与之相关的代码如下：

legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        y: 30,
        navigation: {
            activeColor: '#3E576F',
            animation: true,
            arrowSize: 12,
            inactiveColor: '#CCC',
            style: {
                fontWeight: 'bold',
                color: '#333',
                fontSize: '12px'
            }
        }

有没有办法使用 highcharts 参考实现箭头导航？如果不是，我可以用什么在 highcharts 项目中引入箭头导航？

（我想要的是滚动地图的北 - 南 - 东 - 西按钮）

Answer 1

如何在地图顶部添加这四个按钮（使用 HTML，而不是 Highcharts API），然后简单地将事件附加到它们，单击按钮后您将设置不同的极端，使用 setExtremes() 或 mapZoom() 函数.

Answer 2

        var diffMove = 200;
        var btnLeft = $('#btnLeft');
        if (btnLeft.length > 0) {
            btnLeft.click(function () {
                var chart = $('#container').highcharts();
                var pos = chart.xAxis[0].getExtremes();
                if (pos.min - diffMove < pos.dataMin) {
                    chart.xAxis[0].setExtremes(pos.dataMin, pos.max - pos.min, true, true);
                }
                else
                    chart.xAxis[0].setExtremes(pos.min - diffMove, pos.max - diffMove, true, true);
            });
        }


        var btnRight = $('#btnRight');
        if (btnRight.length > 0) {
            btnRight.click(function () {
                var chart = $('#container').highcharts();
                var pos = chart.xAxis[0].getExtremes();
                if (pos.max + diffMove > pos.dataMax) {
                    chart.xAxis[0].setExtremes(pos.min + (pos.dataMax - pos.max), pos.dataMax, true, true);
                }
                else
                    chart.xAxis[0].setExtremes(pos.min + diffMove, pos.max + diffMove, true, true);
            });
        }

        var btnBottom = $('#btnBottom');
        if (btnBottom.length > 0) {
            btnBottom.click(function () {
                var chart = $('#container').highcharts();
                var pos = chart.yAxis[0].getExtremes();
                //console.log('before : ',chart.yAxis[0].getExtremes());
                if (pos.max + diffMove < pos.dataMax) {
                    chart.yAxis[0].setExtremes(pos.min + diffMove, pos.max + diffMove, true, true);
                }
                else
                    chart.yAxis[0].setExtremes(pos.min + (pos.dataMax - pos.max), pos.dataMax, true, true);
                //console.log('after  : ', chart.yAxis[0].getExtremes());
            });
        }

        var btnTop = $('#btnTop');
        if (btnTop.length > 0) {
            btnTop.click(function () {
                var chart = $('#container').highcharts();
                var pos = chart.yAxis[0].getExtremes();
                //console.log('before : ', chart.yAxis[0].getExtremes());
                if (pos.min - diffMove > pos.dataMin) {
                    chart.yAxis[0].setExtremes(pos.min - diffMove, pos.max - diffMove, true, true);
                }
                else
                    chart.yAxis[0].setExtremes(pos.dataMin, pos.max + (pos.dataMin - pos.min), true, true);
                //console.log('after  : ', chart.yAxis[0].getExtremes());
            });
        }