Question

我有一个容器，其内部div宽度为100％，两个小容器为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%
}

这三个中的每个都有一个Highcharts情节。当我运行代码时，我首先看到大div.center，这很好。当我切换到小二（.left和.rigth）时，图表的内部svg会比div更大。

奇怪的是，一旦你调整窗口大小（或者在'结果'选项卡中），这些图就会变得正常。

这是live example

Answer 1

我找到了解决方案，但仍然不明白这个问题。

要解决此问题，我必须通过以下方式明确提供图表的宽度和高度：

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

更新fiddle

Answer 2

您可以找到here的完整答案。这是由于未显示浏览器中元素的宽度/高度而导致的。

Highcharts fadeIn产生比容器大的图

2 个答案: