是否可以在运行时将导航器隐藏在高图中？

Question

我正在开发一个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

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

这是一个更简单的解决方案：使用overflow: hidden添加“剪切”div，然后充分增加图表容器的高度以将导航器推出，以便隐藏它。

Demo

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