加载新数据时c3 JS滚动条跳转
c3 JS scroll bar jumping when loading new data
我们使用 c3 作为 d3 javascript 图表库的包装器。你甚至可以看到in their own demo当数据更新时滚动条会瞬间闪烁
当页面上已经有滚动条时,这不是问题,就像他们的情况一样。但如果页面较小,添加和突然删除或滚动条可能会很刺耳。
我们没有做任何与他们在示例中所做的有很大不同的事情。谜团是为什么滚动条会跳动。有任何想法吗?如果你想看我的代码,那就是吹:
数据正在使用 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',
'': '#8536C8',
'': '#CA257E',
'': '#EC3500',
'': '#FF7D00',
'': '#FBBE00',
'0': '#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;
}
}
}
});
当 C3 绘制图表时,它会在 <body>
元素的底部附加一个 SVG,即使使用 `style="visibility:hidden"。我刚刚添加了一个 CSS class
body > svg { height:0px !important }
这解决了我的问题。
body > svg { 高度:0; } 没有帮助我。但我做了一些实验并找到了解决方案:
body > svg {
position: absolute;
z-index: -10;
top: 0;
}
不幸的是,如果 window 的高度太小,此方法无法解决问题。
此外,您可以通过默认添加滚动条来摆脱跳转:
body {
overflow-y: scroll;
}
我们使用 c3 作为 d3 javascript 图表库的包装器。你甚至可以看到in their own demo当数据更新时滚动条会瞬间闪烁
当页面上已经有滚动条时,这不是问题,就像他们的情况一样。但如果页面较小,添加和突然删除或滚动条可能会很刺耳。
我们没有做任何与他们在示例中所做的有很大不同的事情。谜团是为什么滚动条会跳动。有任何想法吗?如果你想看我的代码,那就是吹:
数据正在使用 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',
'': '#8536C8',
'': '#CA257E',
'': '#EC3500',
'': '#FF7D00',
'': '#FBBE00',
'0': '#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;
}
}
}
});
当 C3 绘制图表时,它会在 <body>
元素的底部附加一个 SVG,即使使用 `style="visibility:hidden"。我刚刚添加了一个 CSS class
body > svg { height:0px !important }
这解决了我的问题。
body > svg { 高度:0; } 没有帮助我。但我做了一些实验并找到了解决方案:
body > svg {
position: absolute;
z-index: -10;
top: 0;
}
不幸的是,如果 window 的高度太小,此方法无法解决问题。
此外,您可以通过默认添加滚动条来摆脱跳转:
body {
overflow-y: scroll;
}