Chart.js柱形图仍然无法呈现数据

我正在尝试创建一个加密主页，跟踪和管理与比特币相关的数据。目前我正在使用blockchain.com API绘制一个图表，显示池中矿工的数量，该图表中没有列，只有一个空白的边框和轴。
我尝试使用以下代码渲染图形：

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}

型
这就是HTML：

<div class=" max-w-sm w-full lg:max-w-full lg:flex flex-row">
                <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
                </div>
                <div class="border-2 border-gray-400 lg:border-gray-400 bg-white rounded p-4 flex flex-row justify-between leading-normal">
                  <canvas id="chart" width="800" height="400"></canvas>
                </div>
              </div>          
          </div>    
        </div>
      <script src="src/index.js"></script>

型
而不是正确的图形渲染，它根本不显示，如图所示：Canvas is blank:

最好使用window.onload。
这样：

window.onload = function() {
  getData();
};

字符串
在这里看到它的行动：

let columns = [];

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

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
            }
          }
        }
      });
    });
}

window.onload = function() {
  getData();
};

<div class=" max-w-sm w-full lg:max-w-full lg:flex flex-row">
  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
  </div>
  <div class="border-2 border-gray-400 lg:border-gray-400 bg-white rounded p-4 flex flex-row justify-between leading-normal">
    <canvas id="chart" width="800" height="400"></canvas>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

的数据
还有一种方法是使用：DOMContentLoaded：

let columns = [];

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

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
            }
          }
        }
      });
    });
}

document.addEventListener("DOMContentLoaded", function() {
  getData();
});

<div class=" max-w-sm w-full lg:max-w-full lg:flex flex-row">
  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
  </div>
  <div class="border-2 border-gray-400 lg:border-gray-400 bg-white rounded p-4 flex flex-row justify-between leading-normal">
    <canvas id="chart" width="800" height="400"></canvas>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

的字符串
对于：document.onreadystatechange，必须使用document.readyState属性进行处理，如下所示：

document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    getData();
  }
};

型
下面是完整的示例：

let columns = [];

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

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
            }
          }
        }
      });
    });
}

document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    getData();
  }
};

<div class=" max-w-sm w-full lg:max-w-full lg:flex flex-row">
  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
  </div>
  <div class="border-2 border-gray-400 lg:border-gray-400 bg-white rounded p-4 flex flex-row justify-between leading-normal">
    <canvas id="chart" width="800" height="400"></canvas>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Chart.js柱形图仍然无法呈现数据

1条答案

相关问题

热门标签

最新问答