是否有可能隐藏在运行时highcharts导航？(Is it possible to hide th

我工作的一个项目highcharts，我们有一个规定，以显示/隐藏导航仪在运行时，根据的屏幕过滤器的价值。

我们已经添加/显示/隐藏各种系列的数据 - 但我无法找到一个API调用，这将让我躲动态在运行时的导航？ 有谁知道的方式做到这一点 - 我不愿意重新加载整个图表，除非我不得不这样做。

谢谢乡亲！

Answer 1:

您可以隐藏的hide（）函数的所有特别SVG导航元素。

http://jsfiddle.net/dJbZT/1

$('#btn').toggle(function () {
            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.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();
            })
        });

Answer 2:

塞巴斯蒂安的答案是几乎没有，但它实际上并没有调整图表本身，我认为这是在这种情况下，一个要求，因为否则的导航器的空间是完全浪费（更不用说大片空白看起来奇怪）。

这里有一个更简单的解决方案： 加用“限”的div overflow: hidden ，然后增加图表容器的高度足以推动了导航仪所以它被隐藏 。

演示

http://jsfiddle.net/vickychijwani/z4kgsfnp/

 $(function () { var delta = 0; $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { // Create the chart var chart = $('#container').highcharts('StockChart', { chart: { events: { load: function () { // this is always constant after the chart is loaded delta = this.scroller.navigatorGroup.getBBox().height + 30; } } }, rangeSelector: { selected: 1 }, title: { text: 'AAPL Stock Price' }, series: [{ name: 'AAPL', data: data, tooltip: { valueDecimals: 2 } }] }, function (chart) { $('#show-hide-nav-btn').click(function () { // to hide the navigator, increase chart height; the excess will be clipped by the outer clip div because its CSS is set to overflow: hidden var chartHeight = $('.highcharts-container').height(); $('#container').height(chartHeight + delta); $('.highcharts-container').height(chartHeight + delta); // manually reflow chart.reflow(); // negate delta for the next click delta = -delta; }); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.highcharts.com/stock/highstock.js"></script> <button id="show-hide-nav-btn">Show / hide navigator</button> <!-- this div clips the container so the navigator can be hidden from view --> <div id="clip" style="height: 500px; overflow: hidden;"> <div id="container" style="height: 500px; min-width: 500px"></div> </div> 

Answer 3:

这好像是更新navigator.enabled选择最简单的方法：

chart.update({navigator: { enabled: false }})

文章来源: Is it possible to hide the navigator in highcharts at runtime?