CanvasJS 图表宽度错误，直到调整窗口大小

Question

我见过其他人有这个问题，但没有一个以解决方案结束。我正在构建一组图表以在轮播中循环，就 Chrome 调试器上的元素选项卡而言，所有宽度都相同/正确。问题是，在调整窗口大小之前，无论是通过拉起调试器还是进入/退出全屏，只有活动轮播项目实际上是 100% 宽度。

这是我的代码，用于调整在窗口调整大小事件中调用的图表的宽度。我试图将它添加到文档就绪事件中，但这不起作用。关于样式未及时加载的问题。老实说，我被困住了，甚至找不到破解方法来解决这个问题。

$(window).resize(function () {
            for (var i = 0; i < charts.length; i++) {
                charts[i].options.width = $('.carousel').width();
                charts[i].options.height = $('.carousel').height();
                charts[i].render();
            }
        })

我还尝试为绘制图表添加超时 - 仍然是松软的图表。

setTimeout(GetDriverCount('bgxp'), 1500);

这是我想要的结果（在调整大小事件后成功发生）

Answer 1

胜利！以下是我为达到我想要的结果所做的补充：

在文档就绪时初始化轮播间隔后，我添加了循环事件，然后添加了 slide.bs.carousel 事件来设置图表的高度和宽度。

完成后，我绘制了图表。我还在窗口调整大小事件中保留了高度和宽度分配，因为这仍然是一个问题。

$(document).ready(function () {
            $('#chart-carousel').carousel({
                interval: 4500
            });
            $('#chart-carousel').carousel('cycle');

            $('#chart-carousel').on('slide.bs.carousel', function () {
                for (var i = 0; i < charts.length; i++) {
                    charts[i].options.width = $('.carousel').width();
                    charts[i].options.height = $('.carousel').height();
                    charts[i].render();
                } 
            })

            GetDriverCount($('#companyKpi').val());
        })