highcharts only provides me with zoom in/out buttons, how can I add arrow navigation?

this example uses pie chart to introduce a navigator using colors:

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

And when i look at the technology of the navigator the code that is related to it is the below:

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'
            }
        }

Is there a way to achieve arrow navigation using highcharts reference? if not what can i use to introduce arrow navigation in highcharts project?

(What I want is the North - South - East - West buttons to scroll the map)

CodePudding user response：

How about just adding this four buttons on top of map (using HTML, not Highcharts API) and then simply attach events to them, where after click on button you will set different extremes, using setExtremes() or mapZoom() functions.

CodePudding user response：

        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());
            });
        }