Jquery 箭头仅适用于HighCharts中的rangeSelector

在使用HighCharts时，是否可以仅使用范围选择器的左箭头和右箭头

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

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

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

---

我最终找到了另一个解决方案，我定制了这个解决方案来满足我的需求

JS:

HTML:

---

.

要使用滚动条，您需要使用Highstock（Highstock.js file）.Thx进行共享。但是，我希望只保留没有滚动条的箭头。我最终找到了另一个解决方案，我定制并组装了它。好吧，从这个问题上看，这并不明显。不管怎样，很高兴你找到了解决办法。

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

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