Chart.js柱状图无法渲染数据问题求助

我正在开发一款比特币数据追踪管理的加密货币主页，通过blockchain.com API获取矿池矿工数量，用Chart.js渲染柱状图，但图表只显示空白边框和坐标轴，没有数据柱子。

我的代码： #

tradeVolumeBTC()

var columns = []

const chartAPI = 'https://api.blockchain.info/pools?timespan=5days'

document.onload = function getData() {
  fetch(chartAPI)
    .then(res => res.json())
    .then(toFindData => columns.push(toFindData['AntPool'], toFindData['BTC M4'], toFindData['Foundry USA'], toFindData['ViaBTC'], toFindData['Unknown'], toFindData['BTC.com'], 
      toFindData['F2Pool'], toFindData['Binance Pool'], toFindData['Mara Pool'], toFindData['Poolin'], toFindData['SBI Crypto'], toFindData['Ultimus'], toFindData['Braiins Poo'],))
}

const ctx = document.getElementById('chart');
  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 Pools',
        data: columns,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

API返回数据： #

{"ViaBTC":79,"Binance Pool":57,"Foundry USA":213,"F2Pool":85,"AntPool":194,"Mara Pool":32,"Poolin":12,"Unknown":29,"BTC M4":8,"SBI Crypto":13,"Ultimus":4,"BTC.com":4,"Braiins Pool":6}

图表未正确渲染出数据柱子，仅显示边框和坐标轴，如图所示：

问题原因及修复方案 #

核心问题 #

1. 图表初始化过早：页面加载时就创建了Chart实例，但此时API请求还没完成，columns是空数组，自然没有数据。
2. 事件绑定错误：document.onload不是标准的DOM加载事件，无法触发API请求。
3. 数据键拼写错误：代码中Braiins Poo少了一个l，对应API返回的Braiins Pool，会导致该数据项为undefined。
4. 无数据更新机制：即使后续columns被填充，已创建的Chart实例不会自动刷新数据。

修复后的完整代码 #

var columns = [];
const chartAPI = 'https://api.blockchain.info/pools?timespan=5days';
const ctx = document.getElementById('chart');
let chartInstance;

// 绑定正确的DOM加载完成事件
window.addEventListener('DOMContentLoaded', function getData() {
  fetch(chartAPI)
    .then(res => res.json())
    .then(toFindData => {
      // 按labels顺序收集数据，修正拼写错误
      columns = [
        toFindData['AntPool'],
        toFindData['BTC M4'],
        toFindData['Foundry USA'],
        toFindData['ViaBTC'],
        toFindData['Unknown'],
        toFindData['BTC.com'],
        toFindData['F2Pool'],
        toFindData['Binance Pool'],
        toFindData['Mara Pool'],
        toFindData['Poolin'],
        toFindData['SBI Crypto'],
        toFindData['Ultimus'],
        toFindData['Braiins Pool'] // 修正拼写错误
      ];
      // 数据就绪后初始化图表
      initChart();
    })
    .catch(err => console.error('API请求失败:', err));
});

function initChart() {
  // 销毁已有实例避免重复创建
  if (chartInstance) {
    chartInstance.destroy();
  }
  chartInstance = 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矿池矿工数量',
        data: columns,
        borderWidth: 1,
        backgroundColor: 'rgba(54, 162, 235, 0.6)' // 添加背景色让柱子更清晰
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '矿工数量'
          }
        },
        x: {
          title: {
            display: true,
            text: '矿池名称'
          }
        }
      }
    }
  });
}

修改说明 #

• 改用DOMContentLoaded事件，确保DOM元素加载完成后再发起API请求。
• 修正Braiins Pool的拼写错误，保证数据完整。
• 将图表初始化封装成函数，在数据获取完成后调用，确保数据存在时才渲染。
• 添加错误捕获，方便排查API请求问题。
• 可选：增加背景色和坐标轴标题，提升图表可读性。

内容的提问来源于stack exchange，提问作者C0SM1C0ST