Highchart загрузка в угловой

Question

Я использую старшую диаграмму (кольцевую диаграмму), но она загружается до того, как будет получен ответ API, в результате чего данные не будут отображаться в нем

Я хочу получить значение this.Total_connect в старшей диаграмме

Хотите получить значение в отключенном поле старшей диаграммы

ПИРОГОВАЯ КАРТА ЗАГРУЖАЕТСЯ В НАЧАЛЕ НАЧАЛА ЗАГРУЗКИ ПОСЛЕ API ВЫЗЫВАЕТСЯ И ДАННЫЕ ХРАНИЛИСЬ В ПЕРЕМЕННЫХ

     ngOnInit(){
         this.getCustomerInfo1();
         this.getTotalDevice();
         Highcharts.chart('container', this.options);
          this.configuration = DefaultConfig;
          this.configuration.orderEnabled = false; 
             console.log("onInit data",this.data1);
             }


   //CODE FOR CALLING API
     getTotalDevice(){
    this.users2=this._dataService.getCustomerInfo().subscribe((result2) =>{
    this.users2=result2
     console.log("result array" + JSON.stringify(this.users2));
     console.log("connected total" +this.Connect_Total);
     this.ConnectMethod(this.Connect_Total);


      },
    (error)=>{

      })
      }



        //CODE FOR HIGHCHARTS
    public options: any = {
      chart: {
        type: 'pie',
       options3d: {
        enabled: true,
        alpha: 45
       }
    },
   title: {
      text: 'Connected vs disconnected'
   },
   subtitle: {
    text: '3D donut in Highcharts'
    },
    plotOptions: {
    pie: {
        innerSize: 100,
        depth: 45
       }
     },
     series: [{
    name: 'Delivered amount',
    data: [
        ['Connected', this.Connect_Total],
        ['DISCONNECTED', 3000],

        ]
     }]
    }
    }

Answer 1

Самое простое решение для этого - передать ссылку на наблюдаемое, а затем подписаться там, где вам нужно значение ответа.Таким образом, ваш код Highcharts будет выполняться только после получения ответа API.Если вам нужно что-то еще сделать с данными, вы можете использовать оператор касания.Что-то вроде

ngOnInit(){
     this.getCustomerInfo1();
     let observable = this.getTotalDevice();
     observable.subscribe(customerInfoResult => {
       Highcharts.chart('container', this.options);
     })
     this.configuration = DefaultConfig;
     this.configuration.orderEnabled = false; 
     console.log("onInit data",this.data1);
   }


//CODE FOR CALLING API
 getTotalDevice(){
   return this._dataService.getCustomerInfo().pipe(tap((result2) =>{
     this.users2=result2
     console.log("result array" + JSON.stringify(this.users2));
     console.log("connected total" +this.Connect_Total);
     this.ConnectMethod(this.Connect_Total);
  },
  (error)=>{

  }));
}



    //CODE FOR HIGHCHARTS
public options: any = {
  chart: {
    type: 'pie',
   options3d: {
    enabled: true,
    alpha: 45
   }
},
title: {
  text: 'Connected vs disconnected'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
    innerSize: 100,
    depth: 45
   }
 },
 series: [{
name: 'Delivered amount',
data: [
    ['Connected', this.Connect_Total],
    ['DISCONNECTED', 3000],

    ]
 }]
}
}

Предлагаю вам прочитать о том, как работает RxJS ( здесь или здесь ).С самого начала это сбивает с толку, но вы становитесь сильным, когда понимаете это.