Chart.js柱状图不呈现数据

wbrvyc0a 于 12个月前发布在 Chart.js

关注(0)|答案(1)|浏览(198)

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

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}

型
而不是正确地呈现列的图形，而是不呈现，如图所示：

的数据

chart.js

来源：https://stackoverflow.com/questions/77611814/chart-js-column-graph-not-rendering-data

1条答案

按热度按时间

jvlzgdj91#

渲染图表时columns为空。从API接收数据时渲染图表。我将回调函数中的render方法移动了。

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

字符串
了解有关Asychronous programming的更多信息

赞(0）回复(0）举报 12个月前

我来回答

Chart.js柱状图不呈现数据

1条答案

相关问题

热门标签

最新问答