ChartJS响应式图表设100%宽度后动画失效，求解决方案

看起来你遇到的问题很典型——当Chart.js的容器使用弹性宽度（比如100%）时，页面加载时动画直接跳过，而固定宽度时一切正常，甚至在Codepen里相同代码都能运行。这大概率是因为图表初始化时，容器的实际尺寸还没被浏览器布局引擎计算出来，导致Chart.js误以为没有可绘制的区域，直接跳过了动画。

下面是针对你的场景的具体解决方案：

1. 延迟图表初始化，确保容器尺寸稳定 #

页面中的grid__item容器可能因为响应式布局、异步加载的样式或者父容器的布局计算延迟，在DOM刚加载完成时还没拿到正确的宽度。我们可以把图表初始化放在页面所有资源加载完成之后，给容器足够的布局计算时间：

// 等页面所有资源（包括样式、图片）加载完成后再初始化图表
window.addEventListener('load', function() {
  var ctx = document.getElementById("myChart"); 
  var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
      labels: ["Standard", "Premium"], 
      datasets: [{ 
        label: 'Noahs Box', 
        data: [139, 189], 
        backgroundColor: [ 
          'rgba(30, 56, 79, 1)', 
          'rgba(30, 56, 79, 1)', 
        ], 
        borderColor: [ 
          'rgba(30, 56, 79, 1)', 
          'rgba(30, 56, 79, 1)', 
        ], 
        borderWidth: 1 
      }, { 
        label: 'Amazon', 
        data: [192.30, 440.55], 
        backgroundColor: [ 
          'rgba(255, 153, 0, 1)', 
          'rgba(255, 153, 0, 1)' 
        ], 
        borderColor: [ 
          'rgba(255, 153, 0, 1)', 
          'rgba(255, 153, 0, 1)' 
        ], 
        borderWidth: 1 
      }], 
    }, 
    options: { 
      responsive: true, 
      maintainAspectRatio: false, 
      legend: { display: true }, 
      animation: { duration: 7500 }, 
      title: { display: true, text: 'Comparison: Noahs Box vs. Amazon' }, 
      scales: { yAxes: [{ ticks: { beginAtZero:true } }] } 
    } 
  });
});

2. 初始化后手动触发resize，强制执行动画 #

如果延迟初始化还是不行，可以在图表创建后手动触发一次resize事件，让Chart.js重新计算容器尺寸并启动动画：

document.addEventListener('DOMContentLoaded', function() {
  var ctx = document.getElementById("myChart"); 
  var myChart = new Chart(ctx, { 
    // 你的图表配置保持不变
  });

  // 给浏览器一点布局计算的缓冲时间，再触发resize
  setTimeout(function() {
    myChart.resize();
  }, 100);
});

3. 检查容器CSS的布局上下文 #

确保你的目标容器（id="1"的grid__item）没有被其他样式干扰：

• 因为你设置了maintainAspectRatio: false，要确保容器的父元素有明确的高度，图表才能正确渲染
• 避免容器有display: none或者visibility: hidden的初始状态，这会导致尺寸计算异常
• 确认容器的width: 100%是相对于正确的父元素，没有被浮动、flex布局等打乱尺寸继承

为什么Codepen里能正常运行？ #

Codepen的页面结构更简单，容器的尺寸在DOM加载时就能被立即计算出来，没有复杂的响应式布局或者异步样式加载，所以Chart.js初始化时能拿到正确的尺寸，动画正常触发。

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