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

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

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

这是一个更简单的解决方案：添加一个“剪辑” 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 }})