javascript - 正确返回获取的 JSON，但无法将其放入 Chart.JS

Question

我已经学习网络开发几个月了，并试图通过做一些自己的项目来摆脱类(class)的炼狱。第一个旨在成为一个 Chrome 扩展，用内容填充新选项卡。在本例中，我希望该内容是一些加密货币价格图表、新闻文章和推文。这个问题是关于图表的。

我在这里设置了一个代码笔，其中包含此问题的所有代码:https://codepen.io/diggitydoge/pen/QWWGMNb

问题我可以在控制台中看到我想要的数据(一个价格数组和一个时间数组)，但不知道如何将其放入我的图表中，并且在这里找不到任何指南或答案来清楚地解释我如何会:

const btcTime = async () => {
    const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=BTC&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
    const json = await response.json();
    const data = json.Data.Data
    const times = data.map(obj => obj.time)
    return times;
}

const btcPrice = async () => {
    const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=BTC&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
    const json = await response.json();
    const data = json.Data.Data
    const price = data.map(obj => obj.high)
    return {
      price
    }
}

async function btcTimeArray(){
  let results = await btcTime()
  
  console.log(results)
}

btcTimeArray() 

async function btcPriceArray(){
  let results = await btcPrice()
  
  console.log(results)
}

btcPriceArray() 


//---HELPER FUNCTIONS---//
  function checkStatus(response) {
    if (response.ok) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(new Error(response.statusText));
    }
  }

我让 btcTime 返回一个数组，btcPrice 返回一个包含数组的对象，只是为了看看这两种方式是否会在下一步中产生影响:

将结果插入 Chart.JS 数据集

这是使用有效的虚拟数据的数据集的样子

labels: ['a', 'b', 'c', 'd', 'e', 'f'],
        datasets: [{
            label: 'Population',
            data: [
               610994,
               181045,
               153060,
               106519,
               105162,
               95072 
            ],

所以在这一点上，我...

1. 在控制台中查看我的比特币价格和时间数据
2. 需要知道如何存储/调用/目标/其他内容，以将时间放入 Chart.JS 标签属性中，并将价格放入数据集对象中的 Chart.js 数据键中。

我尝试了类似的方法，但似乎不起作用:

labels: btcTime,
        datasets: [{
            label: 'Population',
            data: btcPrice,

非常感谢您的帮助!!!

Answer 1

免责声明:我不太喜欢异步等待的东西。也许我与这个问题相关的代码很糟糕。请随时纠正我。

您必须等待获取请求及其数据才能创建图表，或者必须在数据到达时更新它。我用的是更新的方法。 I put my code in a JSBin.

async function btcTimeArray() {
  let results = await btcTime()

  console.log(results)
  updateTime(results)
}

function updateTime(results) {
  btcChart.data.labels = results
  btcChart.update()
}

P.S.:你应该将我的代码与你的进行比较。我做了一些我认为更好的更改，但这可能是个人意见。这只是为了我处理你的代码的时间，它可能不是你想要的。我使用此网站来显示代码差异:https://www.diffchecker.com/diff

P.P.S:我会在您当前悬停的索引处添加一条彩色垂直线，而不是对悬停的数据使用大点并显示工具提示。