提问人：Slumpy 提问时间：2/24/2023 更新时间：2/25/2023 访问量：89
CanvasJS 图表宽度错误，直到窗口大小调整
CanvasJS Chart Width Bug Until Window is Resized
问：
我见过其他人遇到这个问题，但没有一个以解决方案结束。我正在构建一个图表数组来循环浏览轮播，就 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);
这是我想要的结果（在调整大小事件后成功发生）
图表 1 调整大小后的压缩图表
答：
0赞
Slumpy
2/25/2023
#1
胜利！！以下是我为最终获得我想要的结果所做的添加：
在文档就绪时初始化轮播间隔后，我添加了 cycle 事件，后跟 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());
})
评论
slid.bs.carousel