使用javascript进行幻灯片放映会导致Highcharts大小更改。我可以知道为什么吗？

Question

我有完整的高位图表列表，我将使用幻灯片showw方法逐一显示它。对于第一个幻灯片放映，我的高图以100％的宽度完美显示。但是第二张幻灯片放映后，highcharts大小更改为默认值，该值未遵循我的CSS属性100％。我可以知道为什么吗？

据我了解，highcharts会根据我的div标签更改大小。

我的脚本如下

 <script>
var myIndex = 0;
$(document).ready(function () {

    carousel();
});

function carousel() {
    var i;
    var x = document.getElementsByClassName("chartSlideShow");


    for (i = 0; i < x.length; i++) {

        x[i].style.display = "none";

    }

    myIndex++;

    if (myIndex > x.length) {
        myIndex = 1
    }

    x[myIndex - 1].style.display = "inline-block";

    if (myIndex != x.length) {
        setTimeout(carousel, 5000); // Change image every 5 seconds
    }

}

我的cshtml页面代码如下

 @model Project.Models.ChartModel
 @if (Model.ListOfColumnChart != null && Model.ListOfColumnChart.Count != 0)
    {

        foreach (var chart in Model.ListOfColumnChart)
        {

    <div class="chartSlideShow" style="width:100%">
        @chart.columnChart

    </div>


        }
    }

预期： 所有高图都将以100％的宽度显示。

首张幻灯片显示，它将完全显示100％的宽度

第二张幻灯片显示将恢复为默认大小，而不是100％

感谢你们中有人指出我的错误。