Bootstrap标签页中Chart.js默认动画异常问题求助

问题原因 #

• 未激活的Bootstrap标签页默认处于display: none状态，初始化Chart.js时，对应canvas元素隐藏，无法正确获取其实际渲染尺寸。
• Chart.js柱状图的默认动画依赖canvas的正确尺寸计算，尺寸获取偏差会导致动画起始位置计算错误，最终出现从左上滑入的异常效果。

修复方案 #

方案一：延迟初始化图表（推荐） #

仅在第二个标签页被激活时，才初始化对应的图表，确保canvas处于可见状态，尺寸计算准确。

修改JavaScript代码如下：

// 封装第二个图表的初始化逻辑
function initBarExpChart() {
  const labels2 = ["A", "B", "C"];
  const config2 = {
    type: 'bar',
    data: {
      labels: labels2,
      datasets: [{
        label: '["AA", "BB" , "CC"]',
        data: [3400, 3614, 3843]
      }]
    }
  };
  return new Chart(document.getElementById('bar_exp_chart'), config2);
}

// 监听Bootstrap标签页显示事件
document.addEventListener('shown.bs.tab', function (event) {
  // 检测是否为目标标签页激活
  if (event.target.id === 'nav-profile-tab') {
    // 确保只初始化一次
    if (!window.barExpChartInstance) {
      window.barExpChartInstance = initBarExpChart();
    }
  }
});

方案二：标签页激活时重绘图表 #

若需提前初始化图表，可在标签页显示时强制触发图表尺寸调整与重绘，修正动画计算：

// 页面加载时初始化第二个图表
const labels2 = ["A", "B", "C"];
const config2 = {
  type: 'bar',
  data: {
    labels: labels2,
    datasets: [{
      label: '["AA", "BB" , "CC"]',
      data: [3400, 3614, 3843]
    }]
  }
};
const barexpensechart = new Chart(document.getElementById('bar_exp_chart'), config2);

// 监听标签页显示事件
document.addEventListener('shown.bs.tab', function (event) {
  if (event.target.id === 'nav-profile-tab') {
    // 强制调整图表尺寸，匹配容器实际大小
    barexpensechart.resize();
    // 重新触发默认动画
    barexpensechart.update({
      duration: 1000,
      easing: 'easeOutQuart'
    });
  }
});

说明 #

• 禁用动画（duration: 0）虽能掩盖问题，但不符合需求；同时激活两个标签页会破坏布局，均不可取。
• 两种方案均利用Bootstrap的shown.bs.tab事件，确保图表在可见状态下完成尺寸计算与动画渲染。

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