本文详解如何在单页 html 中正确初始化多个 chart.js 图表实例，解决因 dom 加载时机、重复 id 引用或全局变量覆盖导致的“仅最后一个图表显示”问题，并提供可复用的代码结构与最佳实践。
在使用 Chart.js 时，一个常见误区是：为多个 canvas> 元素分别调用 new Chart()，却未确保每个 canvas 在调用时已存在于 DOM 中，或错误复用了同一变量（如 window.myBar）覆盖前序实例，最终仅最后一个图表成功渲染。
✅ 正确做法是：在 DOM 完全就绪后，遍历所有目标 canvas ID，为每个唯一 ID 创建独立的 Chart 实例。以下为完整、健壮的实现方案：
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
✅ 推荐写法：使用 DOMContentLoaded + 循环初始化
销售统计（Q1）
销售统计（Q2）
销售统计（Q3）
销售统计（Q4）
⚠️ 关键注意事项
- 不要依赖 window.onload：它需等待所有资源（图片、CSS、字体等）加载完成，延迟高；而 DOMContentLoaded 仅等待 DOM 解析完毕，更及时且可靠。
-
避免变量覆盖：原代码中 window.myBar = new Chart(...) 每次赋值都会覆盖前一个引用——这不是渲染失败的原因，但不利于后续控制；若无需引用，可直接 new Chart(...)；如需管理，建议用数组或 Map 存储：
const charts = new Map(); chartIds.forEach(id => { const chart = new Chart(...); charts.set(id, chart); }); - 确保 canvas 存在且唯一：ID 必须全局唯一，且对应
- Chart.js v4+ 配置变更：options.legend.display 已移至 options.plugins.legend.display，旧版（v2/v3）语法不兼容，请按所用版本调整。
✅ 进阶建议：封装为可复用函数
function createBarChart(id, data, options = {}) {
const ctx = document.getElementById(id)?.getContext('2d');
if (!ctx) return;
return new Chart(ctx, {
type: 'bar',
data,
options: {
responsive: true,
plugins: { legend: { display: false } },
...options
}
});
}
// 使用示例
createBarChart('bars1', {
labels: ['A', 'B', 'C'],
datasets: [{ data: [10, 20, 15], backgroundColor: '#5a67d8' }]
});通过以上方式，你不仅能稳定渲染多个图表，还能保持代码清晰、可维护，并为未来动态增删图表预留扩展空间。
