Javascript 滑动切换后HTML画布高度默认为1

我有以下代码来定义js文件中的图表

"<div class='col-10 col-md-3 col-lg-3' id='" + firstName + lastName + 
       primaryCompensationCode + "COLME' style='position: relative;'>",
"<canvas id="firstName + lastName + primaryCompensationCode + "ME",
" height='260' width='260' responsive></canvas>",
"</div>",

当元素加载到页面中时，默认情况下会折叠卡片。问题就在这里：如果你添加了一张卡片1，但没有扩展它，那么再添加一张卡片2。然后card2展开并显示图表，但card1的图表高度为1。在这种情况下，包含引导列中每个图表的div的高度也为1。

根据这一点：，要使响应属性正常工作，需要使用相对单位调整父元素的大小。他们的代码示例是：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

---

尝试获取parrent容器的高度，并将其设置为画布高度。图表的父项是一个div，而该父项是另一个div。当卡片关闭时，div和图表的高度均为0 X 0，因为它们没有显示。因此即使进行了更改，高度仍然默认为0px。您是否可以添加更多支持代码，以显示在关闭和重新打开卡时实际发生的情况？我认为问题在于，要使响应性发挥作用，需要/应该通过图表对象来调整图表的大小。在同一链接中，它们的大小显示为chart.canvas.parentNode.style.height='128px'；。也许将画布包装在bootstrap列中它自己的父元素中，然后给列元素overflow:hidden，这样您就不会直接操纵图表父元素的大小。好吧，这样做不起作用，但是我找到了一个解决方法。每次卡片展开时，我现在都在重新绘制图表。

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>