Стрелки только для rangeSelector в HighCharts

Question

Возможно ли иметь только левую и правую стрелки для rangeSelector при использовании HighCharts?

Я на самом деле не хочу rangeSelector, просто функциональность стрелок на полосе прокрутки. Я не могу найти ничего в документах.

Answer 1

Вы должны установить navigator.enabled свойство false, как это:

$('#container').highcharts('StockChart', {   
    navigator: {
        enabled: false
    },
    ...
});

Рабочая демка.

Answer 2

Я закончил тем, что нашел другое решение, которое я настроил, чтобы делать то, что мне было нужно.

JS:

$(function () {
    chart = new Highcharts.Chart({
        title:{
            text:''
        },
        chart: {
            type: 'area',
            renderTo: 'container'
        },
        xAxis: {
            categories: ['2010', '2011', '2012', '2013', '2014', 'YTD'],
        },
        yAxis: {
            gridLineColor: '#FFFFFF'
        },

        rangeSelector: {
            selected: 1
        },

        scrollbar: {
            enabled: false
        },

        plotOptions: {
            series: {
                pointStart: 2010,
                fillColor: {
                    linearGradient: [0, 0, 0, 300],
                    stops: [
                        [0, '#E5EBF7']
                    ]
                }
            }
        },

        series: [{
            color: '#EBEEF5',
            data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            marker: {
                fillColor: '#71abd1'
            }
        }]
    });
    $(".rangeBtn").click(function() {
        if (!chart) return;
        var extremes = chart.xAxis[0].getExtremes();
        var range = extremes.max - extremes.min;
        var thisBtnIs = $(this).attr('id');
        if(thisBtnIs == "prev") {
            var newMin = extremes.min - range;
            chart.xAxis[0].setExtremes(newMin, extremes.min);
        }
        if(thisBtnIs == "next") {
            var newMax = extremes.max + range;
            chart.xAxis[0].setExtremes(extremes.max, newMax);
        }
        chart.showResetZoom();
    });
});

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<div id="rangeSelector">
    <button id="prev" class="rangeBtn"><</button>
    <button id="next" class="rangeBtn">></button>
</div>

СТИЛЬ:

#rangeSelector{
    left: 5px;
    position: absolute;
    top: 5px;
    z-index: 5;
}

Посмотреть демо здесь.