how to hide/show scrollbar and range selector of highcharts on button click?

问题

I wish to hide/show the navigator, scrollbar & rangeselector on a button click. There doesnt seem to be any API for it. .hide() hides the whole chart.

Any reference towards the solution will be helpful.

回答1:

You can show/hide each SVG elements.

Example: http://jsfiddle.net/dJbZT/99/

$('#btn').toggle(function () {
            chart.rangeSelector.zoomText.hide();
            $.each(chart.rangeSelector.buttons,function(i,b){
                b.hide();
            });
            chart.rangeSelector.inputGroup.hide();
            chart.scroller.xAxis.labelGroup.hide();
            chart.scroller.xAxis.gridGroup.hide();
            chart.scroller.series.hide();
            chart.scroller.scrollbar.hide();
            chart.scroller.scrollbarGroup.hide();
            chart.scroller.navigatorGroup.hide();
            $.each(chart.scroller.elementsToDestroy, function (i, elem) {
                elem.hide();
            })
        }, function () {
            chart.rangeSelector.zoomText.hide();
            $.each(chart.rangeSelector.buttons,function(i,b){
                b.show();
            });
            chart.rangeSelector.inputGroup.show();
            chart.scroller.xAxis.labelGroup.show();
            chart.scroller.xAxis.gridGroup.show();
            chart.scroller.series.show();
            chart.scroller.navigatorGroup.show();
            chart.scroller.scrollbar.show();
            chart.scroller.scrollbarGroup.show();
            $.each(chart.scroller.elementsToDestroy, function (i, elem) {
                elem.show();
            })
        });

来源：https://stackoverflow.com/questions/25802472/how-to-hide-show-scrollbar-and-range-selector-of-highcharts-on-button-click