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

Question

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

一直在尝试很多事情，但都失败了。我最初认为这是因为我的变量是 block 范围的，但现在我认为这是一个异步问题。几个小时以来一直在阅读有关 promises 的内容，但尽管我理解这个概念，但我无法将其应用到我当前的代码中(假设问题是异步的!我是这里的自学任务的菜鸟)。

这是处理从 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)'
        }
      }
    });

}

所以我针对标签调用数据标签变量，但它在轴和控制台中显示为未定义。我期待看到三个月(在变量中保存为字符串)。现在尝试了各种方法，这让我有点发疯。我什至不确定它是一个异步问题，但从我到目前为止所做的来看，它感觉像是问题所在。

非常感谢任何帮助!!

Answer 1

不确定您何时何地调用 useAnotherOneWithWebpack() 方法，但您的代码中的一个问题是您正在为 local 常量分配一些值 datelabel 但不是来自组件的属性:

// 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');

}