c3 加载新数据时 JS 滚动条跳转
c3 JS scroll bar jumping when loading new data
我们使用 c3 作为 d3 javascript 图表库的包装器。即使在他们自己的演示中,当数据更新时,滚动条也会瞬间闪烁。
当页面上已经有一个滚动条时,这不是问题,就像他们的情况一样。但是,如果页面较小,则添加和突然删除或滚动条可能会令人不快。
我们所做的与他们的例子没有太大不同。谜团是滚动条跳跃的原因。有什么想法吗?如果你想看看我的代码,那就吹了:
数据正在使用SignalR传递到我们的AngularJS指令
$scope.$watch('data', function () {
normalizedData = normalize($scope.data);
chart.load({
columns: getChartDataSet(normalizedData)
});
});
在我们获取规范化数据后,它只是被设置为一个数组,然后传递给 C3
var chart = c3.generate({
bindto: d3.select($element[0]),
data: {
type: 'donut',
columns: [],
colors: {
'1¢': '#2D9A28',
'5¢': '#00562D',
'10¢': '#0078C7',
'25¢': '#1D3967',
'$1': '#8536C8',
'$5': '#CA257E',
'$10': '#EC3500',
'$20': '#FF7D00',
'$50': '#FBBE00',
'$100': '#FFFC43'
}
},
tooltip: {
show: true
},
size: {
height: 200,
width: 200
},
legend: {
show: true,
item: {
onmouseover: function (id) {
showArcTotal(id);
},
onmouseout: function (id) {
hideArcTotal();
}
}
},
donut: {
width: 20,
title: $scope.label,
label: {
show: false,
format: function(value, ratio, id) {
return id;
}
}
}
});
正文> svg { height: 0; } 对我没有帮助。但是我做了一些实验,找到了解决方案:
body > svg {
position: absolute;
z-index: -10;
top: 0;
}
不幸的是,如果窗口的高度太小,此方法无法解决问题。
此外,默认情况下,您可以通过添加滚动条来摆脱跳转:
body {
overflow-y: scroll;
}
当 C3 绘制图表时,它会在 <body>
元素的底部附加一个 SVG,即使有 'style="visibility:hidden"。我刚刚添加了一个 CSS 类
body > svg { height:0px !important }
这为我解决了问题。
相关文章:
- ext-js网格面板滚动条不适用于jquery
- 如何在angular js中使用滚动条打印iframe内容
- fullPage.js滚动条:true使浏览器随deelay一起移动
- EXT-JS 4.2.1 保留表单 - 面板滚动条的当前位置
- c3 加载新数据时 JS 滚动条跳转
- 创建一个滚动条一个ext js数据视图
- JS滚动条宽度
- JS选项卡的滚动条问题
- 滚动条按钮JS不起作用
- 滚动条不可见 JS
- fullpage.js滚动条使其在手机浏览器上显得滞后
- JS-jQuery-Tw引导-阻止用户滚动正文,但显示滚动条
- CSS或JS使vert滚动条仅在滚动时显示
- JS代码更改表标题,以显示溢出滚动条出现时
- 如何在没有第三方JS库的情况下改变文本区域滚动条的颜色
- 不能对自定义滚动条应用任何JS修改
- 为特定的js/jsp隐藏Div滚动条
- 检测iFrame JS中的滚动条
- 慢滚动条在FullPage.js
- JS/jQuery -设置侧导航条的滚动条到特定位置