高图表fadeIn生成大于容器的地块

Question

我有一个容器，里面有一个100%宽的div，两个小的是50%。切换按钮隐藏大div并显示小的两个，反之亦然。

html

<div class='container'>
    <button class="toggle">Split</button>
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css

.container {
    position:relative;width:500px;height:300px;
}
.container div {
    position:absolute;height:240px;
}
.left {
    left:0px;width:50%;display:none;
}
.right {
    right:0px;width:50%;display:none;
}
.center {
    left:0px;right:0px;width:100%
}

在这三个中的每一个都有一个高图表图。当我运行代码时，我首先看到的是大div.center，它很好。当我切换到小的两个(.left和.rigth)时，图的内部svg呈现得比div大得多。

奇怪的是，一旦你调整窗口的大小(或篡改“结果”选项卡)，情节就变得正常了。

这是一个实例化

Answer 1

我找到了解决办法，但还是不明白这个问题。

要解决这个问题，我必须通过以下方法显式地提供图表的宽度和高度：

 chart: {
        height: $('.left').height(),
        width: $('.left').width()
    } 

更新的小提琴

Answer 2

完整的答案你可以找到这里。这是由于未显示浏览器中元素的宽度/高度而造成的。