调整窗口大小之前的 CanvasJS 图表宽度错误答案

【问题标题】：CanvasJS Chart Width Bug Until Window is Resized调整窗口大小之前的 CanvasJS 图表宽度错误
【发布时间】：2023-02-25 07:56:58
【问题描述】：

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

Squished Chart

JavaScript

Html

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

$(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);

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

Chart 1 Squished Chart After Resize

【问题讨论】：

第一次绘制需要等到图表显示在轮播中，可以使用slid.bs.carousel事件
我该怎么做呢？我尝试使用警报进行测试，但无法触发该事件。

标签： javascript html charts carousel canvasjs

【解决方案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());
        })

【讨论】：