高图表中的图表选项无法从ngoninit中的函数调用中更新

Question

我正在根据我从可观察到的值显示饼图。我想从可观察对象的函数调用中更新highcharts选项中的系列。当前调用不会更新值，highcharts将显示在chartoptions中初始化的空值。如何从ngOnInit函数调用中更新chartoptions？

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { DataProvider } from '../services/dataprovider';
import { DataserviceService } from '../dataservice.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private service: DataserviceService, private http: HttpClient
    , private dataProvider: DataProvider) {
        
     }
   

   public cashWithDrawl = [{title: "Today", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Yesterday", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Month till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""}
                          ];
    

  ngOnInit(): void {

    this.service.getToday().subscribe (
        reponse => {
            let data = reponse["data"];
            console.log(reponse["data"])
            this.cashWithDrawl[0].successAmt = this.convertNumber(data["cwsuccessAmount"]);
            this.cashWithDrawl[0].successCount = this.convertNumber(data["cwsuccessCount"]);
            this.cashWithDrawl[0].failureCount = this.convertNumber(data["cwfailureCount"]);
            this.cashWithDrawl[0].totalCount = this.convertNumber(data["cwsuccessCount"] +data["cwfailureCount"]);
            this.cashWithDrawl[0].successPer = ((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);
            this.cashWithDrawl[0].failurePer = ((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);

            this.updateData(((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100),((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100));
            

           

            
        }
    )
    

  }

  updateData(a: number, b: number) {
    this.chartOptions.series = [
      {
        // data: data
        data: [{
                    name: 'Success',
                    y: a,
                    // sliced: true,
                    // selected: true,
                    // color: '#00cc44'
                    color: '#33cc33'
                },   {
                    name: 'Failure',
                    y: b,
                    color: '#ff1a1a'
                }]
        
      }
    ];
    console.log(a)
    
  }

  convertNumber(value) {
    
    
        let val = Math.abs(value);
        let num;
        if (val >= 10000000) {
          num = (val / 10000000).toFixed(2) + 'Cr';
        } else if (val >= 100000) {
          num = (val / 100000).toFixed(2) + 'L';
        }
        return num;
      
    
  }


  highcharts = Highcharts;
  chartOptions = {
    chart: {
        backgroundColor: 'transparent',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                // enabled: true,
                format: ' {point.percentage:.1f} %'
            },
            
        }
    },
    
    series: [
        {
            data: []
        }
    ]
}



}

Answer 1

在打字稿文件夹中创建一个更新标志，并将其设置为false。在调用updateData函数时，将标志设置为true并将值绑定到highcharts的update属性这让我们高了图表，以读取对其属性的更新。

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { DataProvider } from '../services/dataprovider';
import { DataserviceService } from '../dataservice.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
updateFlag : boolean = false;

  constructor(private service: DataserviceService, private http: HttpClient
    , private dataProvider: DataProvider) {
        
     }
   

   public cashWithDrawl = [{title: "Today", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Yesterday", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Month till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""}
                          ];
    

  ngOnInit(): void {

    this.service.getToday().subscribe (
        reponse => {
            let data = reponse["data"];
            console.log(reponse["data"])
            this.cashWithDrawl[0].successAmt = this.convertNumber(data["cwsuccessAmount"]);
            this.cashWithDrawl[0].successCount = this.convertNumber(data["cwsuccessCount"]);
            this.cashWithDrawl[0].failureCount = this.convertNumber(data["cwfailureCount"]);
            this.cashWithDrawl[0].totalCount = this.convertNumber(data["cwsuccessCount"] +data["cwfailureCount"]);
            this.cashWithDrawl[0].successPer = ((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);
            this.cashWithDrawl[0].failurePer = ((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);

            this.updateData(((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100),((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100));
            

           

            
        }
    )
    

  }

  updateData(a: number, b: number) {
  this.updateFlag = true;
    this.chartOptions.series = [
      {
        // data: data
        data: [{
                    name: 'Success',
                    y: a,
                    // sliced: true,
                    // selected: true,
                    // color: '#00cc44'
                    color: '#33cc33'
                },   {
                    name: 'Failure',
                    y: b,
                    color: '#ff1a1a'
                }]
        
      }
    ];
    console.log(a)
    
  }

  convertNumber(value) {
    
    
        let val = Math.abs(value);
        let num;
        if (val >= 10000000) {
          num = (val / 10000000).toFixed(2) + 'Cr';
        } else if (val >= 100000) {
          num = (val / 100000).toFixed(2) + 'L';
        }
        return num;
      
    
  }


  highcharts = Highcharts;
  chartOptions = {
    chart: {
        backgroundColor: 'transparent',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                // enabled: true,
                format: ' {point.percentage:.1f} %'
            },
            
        }
    },
    
    series: [
        {
            data: []
        }
    ]
}



}

<highcharts-chart
                     [Highcharts] = "highcharts" 
                     [options] = "chartOptions" 
                     [(update)]="updateFlag" [oneToOne]="true"
                     style = "width: 100%; height: 300px; display: block;">
      </highcharts-chart>