Chart.js 柱状图空白无数据，主因是图表初始化早于 DOM 加载完成及异步 API 数据返回，导致 canvas 元素未就绪或 data 数组为空。本文提供三种可靠时机控制方案（window.onload、DOMContentLoaded、readystatechange），并修复原始代码中的关键错误。
chart.js 柱状图空白无数据，主因是图表初始化早于 dom 加载完成及异步 api 数据返回，导致 `canvas` 元素未就绪或 `data` 数组为空。本文提供三种可靠时机控制方案（`window.onload`、`domcontentloaded`、`readystatechange`），并修复原始代码中的关键错误。
在使用 Chart.js 渲染动态数据（如区块链矿池实时算力）时，一个常见却极易被忽视的问题是：图表实例在数据尚未获取完成前就被创建。原始代码中存在两个核心缺陷：
- 错误使用 document.onload（该属性不存在，应为 window.onload 或事件监听器）；
- 图表初始化逻辑（new Chart(...)）写在 fetch 外部，导致 columns 数组仍为空时即尝试绘图。
此外，API 响应字段名与代码中引用存在不一致（如 "Braiins Poo" 应为 "Braiins Pool"），需严格对齐。
✅ 推荐方案：使用 DOMContentLoaded（最精准、现代且高效）
DOMContentLoaded 在 HTML 文档完全加载并解析完毕后触发，不等待样式表、图片等资源，比 window.onload 更快，且确保 DOM 节点（如
let columns = [];
const chartAPI = 'https://api.blockchain.info/pools?timespan=5days';
function renderChart(data) {
const ctx = document.getElementById('chart');
if (!ctx) {
console.error('Canvas element with id "chart" not found.');
return;
}
new Chart(ctx, {
type: 'bar',
data: {
labels: [
'AntPool', 'BTC M4', 'Foundry USA', 'ViaBTC', 'Unknown',
'BTC.com', 'F2Pool', 'Binance Pool', 'Mara Pool', 'Poolin',
'SBI Crypto', 'Ultimus', 'Braiins Pool'
],
datasets: [{
label: 'BTC Mining Pools (Miners Count)',
data: data,
backgroundColor: [
'#36A2EB', '#FF6384', '#FFCE56', '#4BC0C0', '#9966FF',
'#FF9F40', '#FF6384', '#C9CBCF', '#4BC0C0', '#FFCE56',
'#36A2EB', '#9966FF', '#FF9F40'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
precision: 0 // 整数显示
}
}
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Top BTC Mining Pools (Last 5 Days)'
}
}
}
});
}
function getData() {
fetch(chartAPI)
.then(res => {
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
return res.json();
})
.then(apiData => {
// ✅ 严格按 API 字段名取值，修正拼写错误（如 "Braiins Poo" → "Braiins Pool"）
columns = [
apiData["AntPool"] || 0,
apiData["BTC M4"] || 0,
apiData["Foundry USA"] || 0,
apiData["ViaBTC"] || 0,
apiData["Unknown"] || 0,
apiData["BTC.com"] || 0,
apiData["F2Pool"] || 0,
apiData["Binance Pool"] || 0,
apiData["Mara Pool"] || 0,
apiData["Poolin"] || 0,
apiData["SBI Crypto"] || 0,
apiData["Ultimus"] || 0,
apiData["Braiins Pool"] || 0 // 修正此处
];
renderChart(columns);
})
.catch(err => {
console.error('Failed to load pool data:', err);
// 可选：渲染空图表或错误提示
renderChart(new Array(13).fill(0));
});
}
// ✅ 正确绑定 DOM 就绪事件
document.addEventListener('DOMContentLoaded', getData);
⚠️ 注意事项与最佳实践
- 必须引入 Chart.js 库：在 <script> 标签中添加 CDN 链接（放在你的 JS 文件之前）：<pre class="brush:php;toolbar:false;"><script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
- HTML 结构验证：确保
- 错误防御：API 字段可能缺失（如某矿池暂无数据），使用 || 0 提供默认值，避免 undefined 导致图表崩溃。
- 性能优化：若页面含多个图表，将 renderChart() 抽离为可复用函数，并传入配置对象。
-
替代时机方案：
- window.onload：兼容性最好，但会等待所有资源（图片、CSS），略慢；
- document.onreadystatechange：需检查 readyState === 'complete'，语义稍弱，现已较少使用。
✅ 总结
Chart.js 柱状图“有轴无柱”的根本原因在于执行时序错乱——图表初始化与数据获取未形成可靠依赖。通过将 new Chart() 移入 fetch.then() 回调，并采用 DOMContentLoaded 确保 DOM 就绪，即可彻底解决。同时注意字段名一致性、空值处理和资源加载顺序，即可稳定渲染真实区块链矿池数据。
