本文详解如何在单页 html 中正确初始化多个 chart.js 图表实例，解决因 dom 加载时机、重复 id 引用或全局变量覆盖导致的“仅最后一个图表显示”问题，并提供可复用的代码结构与最佳实践。
在使用 Chart.js 时，一个常见误区是：为多个 <canvas> 元素分别调用 new Chart()，却未确保每个 canvas 在调用时已存在于 DOM 中，或错误复用了同一变量（如 window.myBar）覆盖前序实例，最终仅最后一个图表成功渲染。
✅ 正确做法是：在 DOM 完全就绪后，遍历所有目标 canvas ID，为每个唯一 ID 创建独立的 Chart 实例。以下为完整、健壮的实现方案：
✅ 推荐写法：使用 DOMContentLoaded + 循环初始化
<!-- 四个独立的图表容器 -->
<div class="chart-container">
<h4>销售统计（Q1）</h4>
<canvas id="bars1" height="100"></canvas>
</div>
<div class="chart-container">
<h4>销售统计（Q2）</h4>
<canvas id="bars2" height="100"></canvas>
</div>
<div class="chart-container">
<h4>销售统计（Q3）</h4>
<canvas id="bars3" height="100"></canvas>
</div>
<div class="chart-container">
<h4>销售统计（Q4）</h4>
<canvas id="bars4" height="100"></canvas>
</div>
<!-- Chart.js 库（建议放在 body 底部或使用 defer） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<!-- 初始化脚本（必须在 canvas 和 Chart.js 之后执行） -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const chartIds = ['bars1', 'bars2', 'bars3', 'bars4'];
chartIds.forEach(id => {
const ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Bags Sold',
backgroundColor: '#7e3af2',
borderWidth: 1,
data: [66, 33, 43, 12, 54, 62, 84]
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false }
}
}
});
});
});
</script>⚠️ 关键注意事项
- 不要依赖 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 必须全局唯一，且对应 <canvas id="..."> 已渲染到页面中。可在初始化前加校验：
const el = document.getElementById(id); if (!el) console.warn(`Canvas with id "${id}" not found`); - 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' }]
});通过以上方式，你不仅能稳定渲染多个图表，还能保持代码清晰、可维护，并为未来动态增删图表预留扩展空间。
