NG2 графиков - обновить круговую диаграмму

Question

Am использование NG2-карта - https://github.com/valor-software/ng2-charts

У меня есть круговая диаграмма, если я жесткий код данных, когда я объявляю переменный в верхней части моего component.ts файл, как в примере отображается круговая диаграмма.

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

Мне нужно как-то перерисовать стол. Не могу понять, как это сделать.

public pieChartLabels:string[] = ['Red Flags','Green Flags']; 
public pieChartData: number[] = [200, 400]; 
public chartType:string = 'pie'; 
public redFlagsTotal: any; 
public greenFlagsTotal: any; 

constructor(private dataService:flagService) { 
    let component = this; 
    this.redFlagsTotal = this.dataService.getRedFlags().then(function(result){ 
     component.redFlagsTotal = result.length; 
     console.log(component.redFlagsTotal); 
     component.pieChartData.push(component.redFlagsTotal); 
     console.log(component.pieChartData); 
    }); 

    this.greenFlagsTotal =  this.dataService.getGreenFlags().then(function(result){ 
     component.greenFlagsTotal = result.length; 
     console.log(component.greenFlagsTotal); 
     component.pieChartData.push(component.greenFlagsTotal); 
     console.log(component.pieChartData); 
    }); 
} 

Answer 1

Решенный! Скрыть холст до загрузки данных.

<div *ngIf="pieChartData.length > 1" style="display: block"> 
    <canvas baseChart 
      [data]="pieChartData" 
      [labels]="flagPieChartLabels" 
      [chartType]="chartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"></canvas> 
</div> 

Answer 2

Другой способ сделать свой динамический график данных, чтобы связать директиву диаграммы с помощью ViewChild так:

... 
export class HomeComponent { 
    @ViewChild(BaseChartDirective) 
    public chart: BaseChartDirective; 


void updateChart() { 
    this.chart.chart.update(); // This re-renders the canvas element. 
} 

Теперь вы можете вызвать updateChart каждый набор данных изменился, чтобы сохранить вашу карту в актуальном состоянии !

Answer 3

Вы можете скрыть и показать график за миллисекунды, как это:

refreshChart(){ 
    this.mychart.show = false; 
    setTimeout(()=>{ 
     this.mychart.show = true; 
    },1); 
} 

в использовании шаблона, чем mychart.show с *ngIf, как это:

<div style="display: block"> 
    <canvas baseChart 
      *ngIf="mychart.show" 
      [data]="pieChartData" 
      [labels]="pieChartLabels" 
      [chartType]="pieChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"></canvas> 
</div> 

в вашей функции, чем вы можете использовать refreshChart() Функция, если вы хотите обновить график.

EDIT:

Если вы переинициализировать массив, чем полукокса должен обновляться автоматически, вместо этого:

component.pieChartData.push(component.greenFlagsTotal); 

сделать это:

let temp = [...component.pieChartData, ...component.greenFlagsTotal]; 
component.pieChartData = [...temp];