如何删除向下钻取高图中的滚动条

Question

下面是我的下钻图表，我想在下钻事件时去掉滚动条，而当我们做上钻事件时又需要滚动条。

我尝试了以下 api 但没有帮助：

chart.scroller.scrollbar.hide();
chart.scroller.scrollbarGroup.hide();

scrollbarGroup.hide() - 正在删除滚动条，但随着 success 值也删除了我不想要的。

我的第二个问题是第一次加载时 - 我的滚动条直接指向 user3 而不是 user1。但是，如果我向下钻取事件并向上钻取事件，它指向 **user1 但不是第一次。

如果能解决这两个问题，我们将不胜感激。

Here is my fiddle

Answer 1

更新我在下面的回答中提供的解决方案是基于您正在使用 highStock 的考虑但是一个非常重要的事情是，Highstock 在 xAxis[=22] 中只有日期时间类型=].这就是为什么您的系列显示为日期时间。您没有用一系列项目填充类别。参考文档.. 只需使用 highcharts.js 代替 highstock 另请参阅 Highstock: set xAxis as not "datetime"

在下钻中使用以下代码

$( ".highcharts-scrollbar" ).css( "display", "none" ); 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(); chart.scroller.scrollbarRifles.hide(); $.each( chart.scroller.elementsToDestroy, function ( i, elem ) { elem.hide(); } );

钻取部分参考Fiddle here

Answer 2

第二个问题：在加载事件中调用 set extremes 以从一开始就将 extremes 设置为 0,7。

第一个问题：在钻取事件中隐藏chart.scroller.scrollbar，chart.scroller.scrollbar分组并更改chart.scroller.scrollbar步枪的笔划宽度，因为隐藏在那里效果不佳。更新轴以将新的最小值设置为 0（如果需要设置 min/max，则调用 setExtremes）。在 drillup 事件中显示先前隐藏的元素并将最后一个元素的 strok-width 设置回 1。

示例：http://jsfiddle.net/ndfk7vgd/19/

// Create the chart
var chart = new Highcharts.Chart({
    chart: {
        type: 'column',
        renderTo: 'container',
        events: {
            load: function (e) {
                this.xAxis[0].setExtremes(0, 7);
            },
            drilldown: function (e) {
                this.xAxis[0].update({
                    min: 0
                });
                chart.scroller.scrollbar.hide();
                chart.scroller.scrollbarGroup.hide();
                chart.scroller.scrollbarRifles.attr({
                    'stroke-width': 0
                });
            },
            drillup: function (e) {
                chart.scroller.scrollbar.show();
                chart.scroller.scrollbarGroup.show();
                chart.scroller.scrollbarRifles.attr({
                    'stroke-width': 1
                });
                var _self = this.xAxis[0];
                setTimeout(function () {
                    _self.setExtremes(0, 7);
                }, 1);
            }
        }
    },
...

如何删除向下钻取高图中的滚动条

how to remove scroll bar in drill down highchart

jquery

highcharts

scrollbars

drilldown