高角度加载图表

Question

我正在使用highchart（圆环图），但是它在api响应即将到来之前正在加载，这导致未在其中呈现数据

我想在highchart中获得this.Total_connect的价值

想在高图表断开字段中获得价值

在调用API并存储了可变数据后，便开始在加载过程中加载PIE图表。

     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

最简单的解决方案是传递对可观察对象的引用，然后在需要响应值的位置进行订阅。这样，您的图表将仅在API响应通过后才能运行。如果您需要对数据进行其他任何操作，则可以使用抽头运算符。像

@EventHandler

我建议您阅读RxJS的工作原理（here或here）。开始时会让人感到困惑，但是一旦您理解它就会变得强大。