我的应用程序在各个选项卡中显示HighCharts图表(AngularJS)。 请注意,每次选择标签时都会重新生成图表(这意味着Angular会每次“删除或重新创建DOM树的一部分”)。
我的问题是,当我点击选项卡时,图表的大小只有第一次是正确的。 当我切换选项卡时,创建的图表大大超出了其容器的大小。 令人惊讶的是,调整窗口大小后,图表会正确地重新调整大小(即当调用
所以我尝试了以下内容,但没有帮助:
最后,以下方法确实可行,但感觉有些取巧。
有任何想法关于这个问题是从哪里来的吗?我已经花了几个小时在这上面,感到非常沮丧...
编辑:我还有另一个相关的问题:默认情况下,我的图表有固定的大小,但我有一个“放大”按钮,使它们占据整个空间。该按钮仅切换CSS类以进行操作。然而,这样做并没有触发调整大小事件,也没有触发回流。所以我遇到了相同的问题,即图表不能填充其容器。
这里有一个演示这个问题的fiddle:http://jsfiddle.net/swaek268/3/ 再次说明,我已经找到了解决问题的方法,但感觉像更大的hack。
我的问题是,当我点击选项卡时,图表的大小只有第一次是正确的。 当我切换选项卡时,创建的图表大大超出了其容器的大小。 令人惊讶的是,调整窗口大小后,图表会正确地重新调整大小(即当调用
chart.reflow()
时)。所以我尝试了以下内容,但没有帮助:
$(element).highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
events: {
load: function () {
this.reflow();
}
}
},
...
最后,以下方法确实可行,但感觉有些取巧。
$(element).highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
events: {
load: function () {
var chart = this;
setTimeout(function () { chart.reflow(); }, 0);
}
}
},
...
有任何想法关于这个问题是从哪里来的吗?我已经花了几个小时在这上面,感到非常沮丧...
编辑:我还有另一个相关的问题:默认情况下,我的图表有固定的大小,但我有一个“放大”按钮,使它们占据整个空间。该按钮仅切换CSS类以进行操作。然而,这样做并没有触发调整大小事件,也没有触发回流。所以我遇到了相同的问题,即图表不能填充其容器。
这里有一个演示这个问题的fiddle:http://jsfiddle.net/swaek268/3/ 再次说明,我已经找到了解决问题的方法,但感觉像更大的hack。
var width = 0;
var planreflow = function(){
setTimeout(function(){
if(width!==$('#container').width()){
$('#container').highcharts().reflow();
console.log('reflow!')
}
width = $('#container').width();
planreflow();
}, 10);
};
planreflow();