Javascript 如何在ionic中使用异步数据与chart.js一起使用

我正在通过api为我正在制作的ionic应用程序调用一些数据。数据被异步调用，我需要将数据分配给不同的变量，以便在呈现给用户的图表中使用。我正在努力将数据分配给一个变量，然后可以从创建图表的函数中访问该变量（我使用的是chart.js）。起初，我一直试图从数据中获取一个日期列表，用作X轴刻度，只是为了让事情正常进行

我尝试了很多事情，但都失败了。我最初认为这是因为我的变量是块作用域，但现在我认为这是一个异步问题。几个小时来一直在阅读关于承诺的内容，但尽管我理解这个概念，但我无法将它应用到我当前的代码中（假设问题是异步的！我是一个自学任务的noob）

这就是处理从api中提取数据的代码

async getData() {
  const loading = await this.loadingController.create({
    message: 'Loading'
  });
  await loading.present();
  this.api.getData()
    .subscribe(res => {
      console.log(res);
      this.data1 = res[0];
      loading.dismiss();
      console.log(this.data1);

    const datelabel = this.data1.result[1].date;

    }, err => {
      console.log(err);
      loading.dismiss();
    }); 

}

这是创建图表的代码

useAnotherOneWithWebpack() {

    var ctx = (<any>document.getElementById('canvas-linechart')).getContext('2d');
    console.log('GotData', this.datelabel); //just to see what data I've got here if any in the console

    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: this.datelabel,
            datasets: [{ 
                data: [86,114,106],
                label: "Africa",
                borderColor: "#3e95cd",
                fill: false
              }, { 
                data: [282,350,411],
                label: "Asia",
                borderColor: "#8e5ea2",
                fill: false
              }, { 
                data: [168,170,178],
                label: "Europe",
                borderColor: "#3cba9f",
                fill: false
              }
            ]
          },
      options: {
        title: {
          display: true,
          text: 'World population per region (in millions)'
        }
      }
    });

}

Useanotherone with webpack（）{
var ctx=（document.getElementById（'canvas-linechart'））.getContext（'2d'）；
console.log（'GotData'，this.datelabel）；//看看控制台中有什么数据
var图表=新图表（ctx{
//我们要创建的图表类型
键入：“行”，
//我们的数据集的数据
数据：{
标签：this.datelabel，
数据集：[{
数据：[86114106]，
标签：“非洲”，
边框颜色：“3e95cd”，
填充：假
}, { 
数据：[282350411]，
标签：“亚洲”，
边框颜色：“8e5ea2”，
填充：假
}, { 
数据：[168170178]，
标签：“欧洲”，
边框颜色：“3cba9f”，
填充：假
}
]
},
选项：{
标题：{
显示：对，
正文：“每个区域的世界人口（百万）”
}
}
});
}

因此，我针对标签调用datalabel变量，但它在轴和控制台上显示为未定义。我希望看到三个月（在变量中保存为字符串）。现在尝试了各种方法，这让我有点发疯。我甚至不确定这是否是一个异步问题，但从我到目前为止所做的工作来看，这似乎是一个问题

---

非常感谢您的帮助

不确定何时/何地调用

Useanotherone with webpack（）

方法，但代码中的一个问题是，您将一些值分配给本地常量

日期标签

，而不是组件的属性：

// The following line just creates a local const available only in that scope
const datelabel = this.data1.result[1].date;

相反，您应该初始化组件的属性：

this.datelabel = this.data1.result[1].date;

记住这一点，请尝试以下操作：

async getData() {

  const loading = await this.loadingController.create({
    message: 'Loading'
  });

  await loading.present();

  this.api.getData().subscribe(
    res => {

      // This line will be executed when getData finishes with a success response
      console.log('Inside of the subscribe - success');

      console.log(res);

      this.data1 = res[0];
      this.datelabel = this.data1.result[1].date;

      // Now that the data is ready, you can build the chart
      this.useAnotherOneWithWebpack();

      loading.dismiss();

    }, 
    err => {

      // This line will be executed when getData finishes with an error response
      console.log('Inside of the subscribe - error');

      console.log(err);

      loading.dismiss();
    }); 


  // This line will be executed without waiting for the getData async method to be finished
  console.log('Outside of the subscribe');

}

---

谢谢你@sebafereras我真的认为这可能解决了问题。唯一的问题是我有一个console.log，使用另一个带有网页包的console.log，用于此.datelabel及其显示两次。第一次未定义，第二次包含数据，假设与async有关，是什么触发它更新的？是这个吗。使用另一个Web包（）；或者这只是标准行为？很高兴听到它起作用了！嗯，如果只调用该方法一次，那么控制台日志也应该只执行一次。你能不能在你的问题中加上这个代码，看看是否有什么事情发生了？它工作得很好，为我的x轴拉标签，所以我不太麻烦，再次谢谢你。返回两次的控制台日志是我的原始代码中另一个带有Web包的控制台日志中的日志。但我感觉有点“如果它没有坏，就不要修理它”，因为它现在正在工作