如何删除向下钻取高图中的滚动条
how to remove scroll bar in drill down highchart
下面是我的下钻图表,我想在下钻事件时去掉滚动条,而当我们做上钻事件时又需要滚动条。
我尝试了以下 api 但没有帮助:
chart.scroller.scrollbar.hide();
chart.scroller.scrollbarGroup.hide();
scrollbarGroup.hide() - 正在删除滚动条,但随着 success 值也删除了我不想要的。
我的第二个问题是第一次加载时 - 我的滚动条直接指向 user3 而不是 user1。但是,如果我向下钻取事件并向上钻取事件,它指向 **user1 但不是第一次。
如果能解决这两个问题,我们将不胜感激。
更新
我在下面的回答中提供的解决方案是基于您正在使用 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
第二个问题:在加载事件中调用 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);
}
}
},
...
下面是我的下钻图表,我想在下钻事件时去掉滚动条,而当我们做上钻事件时又需要滚动条。
我尝试了以下 api 但没有帮助:
chart.scroller.scrollbar.hide();
chart.scroller.scrollbarGroup.hide();
scrollbarGroup.hide() - 正在删除滚动条,但随着 success 值也删除了我不想要的。
我的第二个问题是第一次加载时 - 我的滚动条直接指向 user3 而不是 user1。但是,如果我向下钻取事件并向上钻取事件,它指向 **user1 但不是第一次。
如果能解决这两个问题,我们将不胜感激。
更新 我在下面的回答中提供的解决方案是基于您正在使用 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
第二个问题:在加载事件中调用 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);
}
}
},
...