각도 2 PrimeNG 차트이 잘 작동 <a href="http://www.primefaces.org/primeng/#/chart" rel="nofollow noreferrer">http://www.primefaces.org/primeng/#/chart</a></p> <p>의해 제공 chart.js위한 차트 래퍼를 사용하여 미세

Question

임 렌더링되지 값 (숫자 또한 배열) 구현들이 그 새로 고침 수동해야한다 상태 변화에 자신의 문서에 실제로 자동으로 을 듣지 않기 때문이다 렌더링되지는

update(chart: UIChart) { 
    this.data = //reload 
    chart.refresh(); 
} 

내 질문에 참조하는 방법입니다 C 하트 : 내가 을 필요로 할 때 내가 그 refresh 메소드를 호출 할 수 있도록 컨트롤러에서 UIChart는 여기에 내가 차트의 기준에 의해 얻을 관리 (데이터가 비어 있으므로 그리기되지 않음) 내 현재의 구현

constructor(private stationService : StationComplianceService) { } 

    ngOnInit() { 
    this.getStationTypes(); 
    } 

    // ngAfterViewInit(chart: UIChart) { 
    // this.drawGraph(this.processStationType(this.graphData)); not working 
    // } 


    update(chart: UIChart) { 
     chart.refresh(); 
    } 

drawGraph(graphData){ 
    this.data = { 
    labels: ['Up Devices', 'Down Devices'], 
    datasets: [ 
     { 
      data: graphData, 
      backgroundColor: [ 
       "#4dd0e1", 
       "#4fc3f7" 
      ], 
      hoverBackgroundColor: [ 
       "#00acc1", 
       "#039be5" 
      ] 
     }] 
    }; 
} 



    getStationTypes(){ 
    this.stationService.subscribeToComplianceService() 
     .subscribe(
     graphData => { 
      this.graphData = graphData; 
      this.drawGraph(this.processStationType(graphData)); etc etc 

UPDATE 입니다 사용

@ViewChild 
('upDownChart') chart: UIChart; 

그래서 나는 drawGraph 함수의 끝에서) (this.chart.refresh를 호출하여 일하는 것이하지만 이상하게 내가 UI로 클릭에 의해 호출 업데이트를 (리팩토링하지 것으로 기대했다)

update() { 
     this.chart.refresh(); 
    } 

하고

Answer 1

을하고있다 솔루션은에게 작은 시간 제한

setTimeout(() => this.chart.refresh(), 100); 

https://github.com/primefaces/primeng/issues/1422

Answer 2

당신이 4.0.0-rc.1을 primeng을 업데이트하는 경우, 당신은 처리 할 수를 제공하는 것이 었습니다 데이터가 훨씬 쉬워지며, 특히 그것이 비 과학적 인 경우 더욱 그렇습니다.

changeData() { 
      this.changedData = { 
       labels: ['X','Y','Z'], 
       datasets: [ 
        { 
         data: [200, 200, 50], 
         backgroundColor: [ 
          "#50f442", 
          "#f441c4", 
          "#4195f4" 
         ], 
         hoverBackgroundColor: [ 
          "#50f442", 
          "#f441c4", 
          "#4195f4" 
         ] 
        }] 
      } 
      this.data = Object.assign({}, this.changedData); 

} 

How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?

https://github.com/primefaces/primeng/issues/2235

다음은 예이다