高图表淡入生成比容器更大的图

Highcharts fadeIn produces plots larger than containers

本文关键字：淡入 高图表      更新时间：2023-09-26

我有一个容器，里面有一个宽度为 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%
}

在这三者中的每一个都有一个Highcharts图。当我运行代码时，我首先看到大div.center，这很好。当我切换到小两个（.left和.rigth）时，图的内部svg比div大得多。

奇怪的是，一旦您调整窗口大小（或摆弄"结果"选项卡），绘图就会变得正常。

这是一个活生生的例子

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

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

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

更新的小提琴

你可以在这里找到完整的答案。这是由于未显示时未在浏览器中计算元素的宽度/高度而导致的。

相关文章：