Question

使用的应用：角度2
Plattform：Visual Studio Code。

我想显示一个饼图，其值从一开始就固定为4个表中的条目数。表格由表格类型给出： firstlevel ， secondlevel ， critical， secondlevel100 。

现在我不想只是输入pieChartData一些数字，相反，我想调用填充饼图的函数populatePiechart()。

我访问过的网站：

this is one of the links I visited, but it didn't help

the second link I visited, and also didn't help

cockpit.component.ts

 // Pie
public pieChartType: string = 'pie';
public pieChartLabels: string[] = ['Anzahl FirstLevel-Tickets', 'Anzahl SecondLevel-Tickets', 'Anzahl SecondLevel-Tickets 100%', 'Anzahl Kritische-Tickets'];
public pieChartData: number[] = [ ];  //How do I call the function here??
private pieChartColors: any[] = [{ backgroundColor: ["rgba(35, 35, 255, 1)", "rgba(0, 0, 155, 1)", "rgb(138,43,226)", "rgba(199, 19, 62, 1)"] }];

    populatePiechart(ticketType:string,number: number):number[]{
    this.pieChartData[ticketType]=number;
    let num:number[] = this.pieChartData;
    this.pieChartData=num;
    return this.pieChartData;
}

changeFirstLevel(number: number) {  //EventListener-anzahl tickets tabelle
 // console.log(this.pieChartData[0], number );
    this.pieChartData[0] = number;
    let num:number[] = this.pieChartData;
    this.pieChartData=num;

}

changeSecondLevel(number: number) {
    this.pieChartData[1] = number;
    let num:number[] = this.pieChartData;
    this.pieChartData=num;

}

  changeSecondLevel100(number: number){
  // this.pieChartData[2] = number;
  this.pieChartData[2] = number;
    let num:number[] = this.pieChartData;
    this.pieChartData=num;

}

changeCritical(number: number) {
    this.pieChartData[3] = number;
    let num:number[] = this.pieChartData;
    this.pieChartData=num;
}

cockpit.component.html：

<div class="row">
<div class="col-md-6 noPaddingRight">         <!-- TABELLEN TICKETS -->
  <ticket-table ticketType="critical" (ticketChanger)="changeCritical($event)"></ticket-table>   <!-- Wenn sich Anzahl Tickets im System ändert (Tabellen) ändert sich PieChart -->
  <ticket-table ticketType="firstlevel" (ticketChanger)="changeFirstLevel($event)"></ticket-table>
</div>
<div class="col-md-6 noPaddingLeft">
  <ticket-table ticketType="secondlevel" (ticketChanger)="changeSecondLevel($event)"></ticket-table>   
  <ticket-table ticketType="secondlevel100" (ticketChanger)="changeSecondLevel100($event)"></ticket-table> <!-- NICHT ÄNDERN, SLA in TABELLE nicht gewünscht -->
 <!--populating piechart-->
  <ticket-table ticketType="firstlevel" (ticketChanger)="populatePiechart(firstlevel,$event)"></ticket-table>
  <ticket-table ticketType="secondlevel" (ticketChanger)="populatePiechart(secondlevel,$event)"></ticket-table>
  <ticket-table ticketType="secondlevel100" (ticketChanger)="populatePiechart(secondlevel100,$event)"></ticket-table>
  <ticket-table ticketType="critical" (ticketChanger)="populatePiechart(critical,$event)"></ticket-table>

</div>

票证table.component.ts：

cockpitList: ICockpit[];
collapsed: boolean = true;
progress: number;
cockpitUpdate: Date;

@Output() ticketChanger: EventEmitter<number> = new EventEmitter<number>();  //


panelColor: string;

@Input() ticketType: string;                                                      //

constructor(private _cockpitService: CockpitService,
    private _toasterService: ToasterService) { moment.locale('de'); }

ngOnInit() {
    this.refreshCockpitList();
    setInterval(() => { this.refreshCockpitList(); }, 1000 * 60);
}

refreshCockpitList() {
    this._cockpitService.getCockpits(this.ticketType).subscribe(data => { //BACKEND
        this.cockpitList = data;
        console.log(this.ticketType, this.cockpitList.length);
        this.ticketChanger.emit(this.cockpitList.length);
        console.log(this.ticketType, this.cockpitList.length);
        this.cockpitUpdate = new Date();
      });
}

顺便说一句，我是棱角分明的新手，我不确定我在哪里获得数字（因为我只是对应用进行调整，我不是开发人员）以及在哪里调用函数{{1} }

如何通过调用函数来填充饼图

0 个答案: