如何在Bootstrap中调整图表高度以填满列剩余空白空间

解决方案 #

你遇到的问题是Chart.js默认开启了宽高比锁定，导致无法随容器拉伸，按以下步骤修改即可：

• 第一步：修改两个图表的Chart.js配置，将maintainAspectRatio参数从true改为false，关闭宽高比强制限制，允许图表随容器尺寸调整。
• 第二步：修正样式单位错误，你现有代码中写的height: 471缺少像素单位，改为height: 471px确保高度设置生效。
• 第三步：给canvas元素的直接父容器设置height: 100%，让容器占满可用高度，同时删除第一个卡片中canvas下方多余的空card-body节点，避免其占用高度空间。

关键修改示例 #

原配置项：

"options":{"maintainAspectRatio":true, ......}

修改后：

"options":{"maintainAspectRatio":false, ......}

第一个卡片结构调整示例（删除空的card-body）：

<div class="card shadow mb-4">
  <div class="card-header d-flex justify-content-between align-items-center">
    <!-- 原有头部内容不变 -->
  </div>
  <div style="height: 471px;">
    <canvas data-bss-chart="......"></canvas>
  </div>
  <!-- 删除原来的空<div class="card-body" ...></div>节点 -->
</div>

第二个柱状图父容器调整示例：

<div class="text-start shadow" style="border-color: var(--bs-blue);color: var(--bs-blue);height: 471px;">
  <canvas data-bss-chart="......"></canvas>
</div>

修改完成后图表就会自动填满父容器的可用高度，和列高度同步变化。

内容的提问来源于stack exchange，提问作者Struggling brat