Как использовать асинхронные данные для использования с chart.js в ионной - PullRequest
Новая
       19

Как использовать асинхронные данные для использования с chart.js в ионной

2 голосов
/ 12 мая 2019

Я вызываю некоторые данные через API для ионного приложения, которое я делаю.Данные вызываются асинхронно, и мне нужно назначить данные различным переменным для использования в диаграмме, которая будет представлена ​​пользователю.Я изо всех сил пытаюсь присвоить данные переменной, к которой я затем могу получить доступ из функции, которая создает диаграмму (я использую chart.js).Первоначально я пытался получить список дат из данных для использования в качестве шкалы оси X, просто для того, чтобы все заработало.

Я пытался сделать несколько вещей и потерпел неудачу.Сначала я думал, что это потому, что моя переменная была ограничена областью блока, но теперь я думаю, что это асинхронная проблема.Читал об обещаниях в течение нескольких часов, но, хотя я понимаю концепцию, которую я не вижу, чтобы применить ее к моему текущему коду (предположим, что проблема асинхронная! Я новичок в миссии самообучения здесь).

Так вот этот код, который обрабатывает извлечение данных из 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)'
        }
      }
    });

}

Итак, я вызываю переменную datalabelпротив меток, но отображается как неопределенное на оси и в консоли.Я ожидаю увидеть три месяца (которые сохраняются в виде строк в переменной).Попробовал все виды сейчас, и это сводит меня с ума.Я даже не уверен, что это асинхронная проблема, но из того, что я сделал до сих пор, это похоже на проблему.

Любая помощь действительно ценится !!

1 Ответ

0 голосов
/ 12 мая 2019

Не уверен, когда / где вы вызываете метод useAnotherOneWithWebpack(), но одна проблема из вашего кода заключается в том, что вы присваиваете некоторые значения локальной константе 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');

}
...