仅适用于HighCharts中rangeSelector的箭头

Question

使用HighCharts时，是否可以只使用rangeSelector的左箭头和右箭头？

我实际上并不想要rangeSelector，只是滚动条上箭头的功能。我无法在文档中找到任何内容。

Answer 1

您应该将navigator.enabled属性设置为false，如下所示：

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

Working demo.

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

View demo here