Bootstrap5第二个tab标签页出现无限空白，切换年度统计时页面持续拉伸

问题根因 #

这个问题是Chart.js和Bootstrap标签页的常见兼容问题，核心原因有两个：

1. Bootstrap 非激活状态的标签页默认是display: none属性，DOM元素没有实际宽高。你改成动态加载图表后，初始加载时年度标签页还处于隐藏状态，此时初始化/重绘Chart.js图表时，框架无法正确计算canvas容器尺寸，会无限拉伸canvas高度。
2. 你动态切换年月更新图表的逻辑没有先销毁旧的Chart实例，同一个canvas上会叠加多个图表实例，每次重绘时尺寸计算会不断溢出，最终导致页面高度无限增加，这类渲染层面的异常不会在JS控制台抛出报错。

修复方案 #

1. 动态更新图表前先销毁旧实例 #

每个图表单独存储实例引用，更新数据前先销毁旧实例，避免多实例叠加：

// 示例：月度会话统计图表逻辑，所有图表都按这个逻辑修改
let monthSessionChart = null;
function updateMonthSessionChart(chartData) {
  // 先销毁已存在的实例
  if (monthSessionChart) {
    monthSessionChart.destroy();
  }
  const ctx = document.getElementById('monthy_session_stats').getContext('2d');
  monthSessionChart = new Chart(ctx, {
    // 你的原有图表配置项
    data: chartData
  });
}
// 年度图表同理单独维护实例

2. 监听标签页切换事件，等标签显示后再渲染图表 #

不要在页面初始化时就渲染所有标签的图表，监听Bootstrap标签页的shown.bs.tab事件，等对应标签完全显示、有正确宽高后再初始化/重绘对应图表：

const tabTriggers = document.querySelectorAll('a[data-bs-toggle="tab"]');
tabTriggers.forEach(trigger => {
  trigger.addEventListener('shown.bs.tab', e => {
    const activeTabHref = e.target.getAttribute('href');
    if (activeTabHref === '#Year') {
      // 切换到年度标签后再渲染年度所有图表
      updateAllYearCharts();
    }
    if (activeTabHref === '#Month') {
      // 切换到月度标签后再渲染月度所有图表
      updateAllMonthCharts();
    }
  });
});

3. 可选：固定canvas尺寸避免自动拉伸 #

给所有图表canvas元素加固定宽高样式，强制限制尺寸：

#monthy_session_stats, #monthy_training_stats,
#yearly_session_stats, #yearly_training_stats {
  width: 180px !important;
  height: 180px !important;
}

内容的提问来源于stack exchange，提问作者Sven Lorenzino