Question

我希望能够动态切换Highstock导航器的存在，并允许图表扩展到它占用的垂直空间。

我尝试过简单地切换chart.userOptions.navigator.enabled，但它没有效果。

This thread解释了如何使用.hide（）和.show（）方法来隐藏导航器和滚动条的各个组件，但这些方法使用可见性：隐藏，因此空间不可用于图表。但是，使用.css（{display：＆＃39; none＆＃39;}）可以正常工作，但系列本身没有.css（）方法，我也无法找到从中移除系列的方法只是导航器。

有没有人知道实现我想要的方法？

感谢。

Answer 1

简而言之：不支持实时隐藏导航器。最好的方法是销毁图表并使用禁用的导航器创建新图表。

其他解决方案是使用Sebastian Bochan提供的解决方法。然后，您需要手动更新yAxis.height，例如：http://jsfiddle.net/dJbZT/91/

        $('#btn').toggle(function () {
            chart.yAxis[0].defaultHeight = chart.yAxis[0].height;
            chart.xAxis[0].defaultHeight = chart.xAxis[0].height;
            chart.yAxis[0].update({
                height: 500 - chart.plotTop - 35
            }, false);
            chart.xAxis[0].update({
                height: 500 - chart.plotTop - 35
            });
            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.yAxis[0].update({
                height: chart.yAxis[0].defaultHeight
            }, false);
            chart.xAxis[0].update({
                height: chart.xAxis[0].defaultHeight
            });
            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

还有另一种方法：按导航器的高度缩小图表高度，并将chart.reflow设置为false，以阻止 Y轴适应新的图表高度（尝试将其设置为小提琴中的true - 注意显示/隐藏导航器时的闪烁？）。

我已将此答案添加到the other thread，演示位于此处：http://jsfiddle.net/dJbZT/148/（致{Sesetian Bochan为original answer）。

Answer 3

我不确定highcharts何时通过选项添加此功能，但这对我有用：

    var chart = $('#graphContainer').highcharts();
    chart.options.navigator.enabled = !chart.options.navigator.enabled;
    $('#graphContainer').highcharts(chart.options);

有没有办法动态切换Highstock导航器重新获得图表的垂直空间？

3 个答案: