Question

下面是我的向下钻取图表，我想在向下钻取事件时删除滚动条，并在我们进行钻取事件时再次需要滚动条。

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

$ ./bin/read_write_stdin

 enter text  : The quick brown fox jumps over the lazy dog!

 text entered: The quick brown fox jumps over the lazy dog!

scrollbarGroup.hide（） - 正在删除滚动条，但还有成功值，同时删除了我不想要的内容。

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

任何帮助都会非常感谢您解决这两个问题。

Here is my fiddle

Answer 1

<强>更新我在下面的回答中提供的解决方案是基于您使用highStock 的考虑但非常重要的一点是，Highstock在xAxis中只有唯一的dateTime类型。这就是为什么你的系列作为日期时间显示的原因。您没有使用一系列项目填充类别。参考文档..只需使用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

第二个问题：在load事件中调用set extremes从一开始就将极值设为0,7。

第一个问题：在向下钻取事件中隐藏chart.scroller.scrollbar，chart.scroller.scrollbarGroup并更改chart.scroller.scrollbarRifles的笔触宽度，因为hide在那里工作得不好。更新轴以将新min设置为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);
            }
        }
    },
...

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

2 个答案: