div容器内多个Chart.js画布仅最后一个显示其余空白的技术问询

这个现象是Chart.js响应式模式的默认定位规则和DOM布局结构直接冲突导致的，和你循环渲染的逻辑本身没有关系，核心逻辑链条如下：

• 从你的配置语法（yAxes轴配置、全局legend配置）可以判断你使用的是Chart.js v2版本，这个版本默认开启responsive: true（响应式适配）开关。这个模式下Chart.js在初始化时会自动修改DOM元素的定位样式：将canvas元素设置为position: absolute（脱离文档流），将canvas的直接父容器设置为position: relative（作为定位参考框）。
• 你把所有需要渲染的canvas都直接放在同一个公共div容器内，没有给每个canvas单独设置独立的父级容器。那所有canvas在初始化后，都会被设置为相对于这个公共div的绝对定位，全部堆叠在容器的左上角（top:0, left:0）位置。最后一个初始化的canvas因为层叠顺序最靠上，会完全遮挡住前面所有同位置的canvas，就出现了“只有最后一个图表可见”的视觉效果。
• 因为每个Chart实例的2D绘图上下文是独立的，所有实例都正常完成了绘图流程，只是画布元素在页面上被上层元素遮挡，所以调用toBase64Image导出时，直接读取的是画布本身的像素缓存，不受层叠遮挡的影响，导出的内容完全正常，和你观察到的现象完全匹配。

另外你代码里还有个不影响布局、但会导致样式异常的小bug：borderColor: 'rgb(54, 162, 235, 0.3, 0.3)' 这个颜色值不合法，CSS的rgba格式最多支持4个参数（R/G/B/透明度），多写了一个0.3会导致线条颜色解析失败。

1. 给每个canvas设置独立的父容器 #

这是最适配Chart.js默认行为的修复方式，不需要修改图表的初始化配置：

• 调整DOM结构，把直接放在公共div里的canvas，逐个嵌套到独立的专用父容器中，确保每个Chart实例初始化时，会把这个独立的小div当成自己的定位参考，不会出现多个canvas共享同一个参考框导致的堆叠问题。
• 调整后的DOM结构参考：

  <div class="common-container">
    <!-- 每个canvas配一个独立的父容器 -->
    <div class="chart-slot">
      <canvas id="chartId1" style="width:100% !important; height: 400px !important;"></canvas>
    </div>
    <div class="chart-slot">
      <canvas id="chartId2" style="width:100% !important; height: 400px !important;"></canvas>
    </div>
    <div class="chart-slot">
      <canvas id="chartIdn" style="width:100% !important; height: 400px !important;"></canvas>
    </div>
  </div>
  

• 给每个.chart-slot设置基础的块级布局样式（比如宽度100%、上下保留16px间距），即可让图表正常从上到下依次排列，不会互相遮挡。

2. 覆盖Chart.js的自动定位规则 #

如果不想调整现有DOM结构，可以在每个图表的全局配置中手动修改默认行为，抵消Chart.js自动添加的绝对定位规则：

• 在每个Chart实例的options配置项中新增两个核心配置：
  • maintainAspectRatio: false：关闭默认的宽高比维持逻辑，让你内联写死的400px高度可以正常生效
  • 手动给每个canvas添加display: block; position: relative的样式，抵消Chart.js自动添加的position: absolute规则
• 这种方式下所有canvas会回到正常的文档流布局，依次从上到下排列，不会出现堆叠遮挡。

3. 循环渲染的注意事项 #

在for循环中批量创建Chart实例时，注意两点避免额外的异常：

• 不要用全局var声明存储chart实例，最好把每个实例存在独立的数组中，避免因为JS变量作用域提升的问题，导致循环内的实例引用指向最后一个创建的图表。
• 批量渲染完成后可以手动触发一次window.dispatchEvent(new Event('resize'))，让所有图表重新计算一次尺寸，避免出现尺寸适配异常。

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