本文详解 chart.js 中多个图表无法同时加载的根本原因——dom 元素未就绪、canvas id 重复或未绑定、脚本执行时机不当，并提供可直接复用的修复代码与最佳实践。
本文详解 chart.js 中多个图表无法同时加载的根本原因——dom 元素未就绪、canvas id 重复或未绑定、脚本执行时机不当，并提供可直接复用的修复代码与最佳实践。
在使用 Chart.js 渲染多个图表时，开发者常遇到“仅最后一个图表显示，其余空白”的问题。这并非 Chart.js 本身限制（它完全支持多实例），而是由HTML 结构、JavaScript 执行顺序与 DOM 查询逻辑共同导致的典型集成错误。
核心问题通常有三类：
- ✅ Canvas 元素未被正确查询：document.getElementById('xxx') 返回 null（例如 id="chartAge" 的
- ✅ ID 冲突或重复使用：多个图表误用同一 id（如两个
- ✅ 脚本执行早于 DOM 加载：JS 在
以下是一个结构清晰、可稳定运行的多图表初始化方案：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script><div class="content">
<!-- 图表 1：Age 分布（Bar） -->
<div class="box age">
<div class="chart-parent">
<canvas id="chartAge"></canvas>
</div>
</div>
<!-- 图表 2：Race 分布（Bar） -->
<div class="box ethnicity">
<canvas id="chartRace"></canvas>
</div>
<!-- 图表 3：Race/Ethnicity vs Age（Line，双 Y 轴） -->
<div class="box both">
<div class="chart-parent">
<canvas id="chartRaceAge"></canvas>
</div>
<div class="description">
<h1>Race/Ethnicity vs. Age</h1>
<p>Multi-dataset line chart with dual Y axes.</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10340" title="arcgis-js"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="arcgis-js" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10340" title="arcgis-js" class="overflowclass">arcgis-js</a>
<p class="overflowclass">提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。</p>
</div>
<a rel="nofollow" href="/xiazai/skill10340" title="arcgis-js" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
</div>
<script>
// ✅ 确保 DOM 就绪后再执行图表初始化
document.addEventListener('DOMContentLoaded', () => {
// === 图表 1：Age 分布 ===
const ctxAge = document.getElementById('chartAge');
if (ctxAge) {
new Chart(ctxAge, {
type: 'bar',
data: {
labels: ['<18', '18–30', '31–45', '>45', 'Unknown'],
datasets: [{
label: 'Count',
data: [15, 22, 28, 19, 7],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: { responsive: true, maintainAspectRatio: false }
});
}
// === 图表 2：Race 分布 ===
const ctxRace = document.getElementById('chartRace');
if (ctxRace) {
new Chart(ctxRace, {
type: 'bar',
data: {
labels: ['White', 'Black', 'Hispanic', 'Asian', 'Other'],
datasets: [{
label: 'Count',
data: [42, 29, 35, 12, 8],
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: { responsive: true, maintainAspectRatio: false }
});
}
// === 图表 3：Race/Ethnicity vs Age（修正版）===
const ctxRaceAge = document.getElementById('chartRaceAge');
if (ctxRaceAge) {
const data = {
datasets: [{
label: 'Races/Ethnicities Killed',
data: [20, 30, 30, 40, 50],
backgroundColor: 'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
tension: 0.4,
yAxisID: 'y'
}, {
label: 'Ages Killed',
data: [10, 20, 30, 40, 50],
backgroundColor: 'rgba(0, 26, 104, 0.2)',
borderColor: 'rgba(0, 26, 104, 1)',
tension: 0.4,
yAxisID: 'y1'
}]
};
const config = {
type: 'line',
data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
position: 'left',
title: { display: true, text: 'Races/Ethnicities' }
},
y1: {
beginAtZero: true,
position: 'right',
title: { display: true, text: 'Ages' },
grid: { drawOnChartArea: false }
}
}
}
};
new Chart(ctxRaceAge, config);
}
// ✅ 安全获取 Chart.js 版本（确保 Chart 已定义）
const chartVersionEl = document.getElementById('chartVersion');
if (chartVersionEl && typeof Chart !== 'undefined') {
chartVersionEl.textContent = Chart.version;
}
});
</script>
✅ 关键实践总结：
- 始终检查 DOM 元素存在性：对每个 getElementById 结果做 if (element) 判断，避免 null 传入 new Chart()；
- 使用唯一 ID：为每个
- 包裹在 DOMContentLoaded 中：确保所有
- 避免全局变量污染与命名冲突：每个图表使用独立上下文变量（ctxAge, ctxRace），不复用 ctx 或 myChart；
- 启用响应式与宽高控制：设置 responsive: true 并配合 CSS 控制 .chart-parent canvas { width: 100%; height: 300px; }，防止渲染异常。
遵循以上结构与校验逻辑，即可稳定渲染任意数量的 Chart.js 图表，彻底规避“只显示最后一个”的常见陷阱。
