本文讲解如何在单页 html 中同时渲染多个 chart.js 图表（如 4 个独立柱状图），解决因 dom 元素未就绪或重复覆盖 window.mybar 导致仅最后一个图表显示的问题。
在使用 Chart.js 时，一个常见误区是：为多个 <canvas> 元素依次调用 new Chart()，却未确保每个 canvas 已存在于 DOM 中，或错误复用同一变量名（如 window.myBar）导致后续实例被覆盖。此外，Chart.js v3+ 的配置结构也与旧版不同（例如 legend.display 现位于 plugins.legend 下），若混用旧写法会导致选项失效。
✅ 正确做法是：
- 确保脚本在 DOM 加载完成后执行（推荐使用 DOMContentLoaded 而非 window.onload，避免等待图片/资源加载延迟）；
- 为每个图表使用唯一 ID，并独立创建 Chart 实例（不共用变量名）；
- 统一管理配置，复用数据逻辑，提升可维护性。
以下是完整、可运行的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Multiple Chart.js Charts</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
</head>
<body>
<!-- 四个独立图表容器 -->
<div class="chart-container mb-8">
<h4 class="mb-2 font-semibold text-gray-800">Bars #1</h4>
<canvas id="bars1" height="100"></canvas>
</div>
<div class="chart-container mb-8">
<h4 class="mb-2 font-semibold text-gray-800">Bars #2</h4>
<canvas id="bars2" height="100"></canvas>
</div>
<div class="chart-container mb-8">
<h4 class="mb-2 font-semibold text-gray-800">Bars #3</h4>
<canvas id="bars3" height="100"></canvas>
</div>
<div class="chart-container mb-8">
<h4 class="mb-2 font-semibold text-gray-800">Bars #4</h4>
<canvas id="bars4" height="100"></canvas>
</div>
<script>
// ✅ 推荐：使用 DOMContentLoaded 确保元素已就绪
document.addEventListener('DOMContentLoaded', () => {
const chartIds = ['bars1', 'bars2', 'bars3', 'bars4'];
// 共享数据配置（可按需动态生成）
const commonData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Bags',
backgroundColor: '#7e3af2',
borderWidth: 1,
data: [66, 33, 43, 12, 54, 62, 84] // 注意：原数据有 8 项，但 labels 只有 7 个 → 已修正为 7 项
}]
};
const commonOptions = {
responsive: true,
plugins: {
legend: { display: false }
}
};
// 为每个 ID 创建独立图表实例（⚠️ 不要赋值给同一个变量！）
chartIds.forEach(id => {
const ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
type: 'bar',
data: commonData,
options: commonOptions
});
});
});
</script>
</body>
</html>? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要复用变量名：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 图表。
