本文讲解如何在单页 html 中同时渲染多个 chart.js 图表（如 4 个独立柱状图），解决因 dom 元素未就绪或重复覆盖 window.mybar 导致仅最后一个图表显示的问题。

在使用 Chart.js 时，一个常见误区是：为多个 canvas> 元素依次调用 new Chart()，却未确保每个 canvas 已存在于 DOM 中，或错误复用同一变量名（如 window.myBar）导致后续实例被覆盖。此外，Chart.js v3+ 的配置结构也与旧版不同（例如 legend.display 现位于 plugins.legend 下），若混用旧写法会导致选项失效。

✅ 正确做法是：

1. 确保脚本在 DOM 加载完成后执行（推荐使用 DOMContentLoaded 而非 window.onload，避免等待图片/资源加载延迟）；
2. 为每个图表使用唯一 ID，并独立创建 Chart 实例（不共用变量名）；
3. 统一管理配置，复用数据逻辑，提升可维护性。

以下是完整、可运行的示例代码：

  
  
  






  
Bars #1
  



  
Bars #2
  



  
Bars #3
  



  
Bars #4
  

? 关键注意事项：

• 不要复用变量名：window.myBar = new Chart(...) 会不断覆盖前一个引用，不仅影响调试，还可能导致内存泄漏。应直接创建实例而不赋值（或使用数组/对象存储多个引用，如 charts[id] = new Chart(...)）。
• 数据长度必须匹配标签数量：原示例中 data 有 8 个值，但 labels 只有 7 个 → 渲染会异常或静默失败，务必校验。
• Canvas 高度建议显式设置：通过 height 属性或 CSS 控制尺寸，避免因响应式行为导致图表挤压。
• CDN 版本一致性：示例使用 Chart.js v4（最新稳定版），其插件结构与 v2/v3 不同；若使用旧版，请调整 options.legend 路径（v2/v3 为 options.legend.display）。

? 进阶提示：如需差异化数据（例如每张图展示不同年份销量），可将 commonData 改为工厂函数，传入参数动态生成数据集，实现灵活复用。

通过以上方式，你就能在页面中稳健、清晰地渲染任意数量的 Chart.js 图表。