각도 4 선 차트 데이터가 http에서 데이터를 표시하지 않습니다.

Question

http get 메소드에서 제공하는 데이터베이스의 데이터를 사용하여 Angular 4 및 chart.js를 사용하여 선형 차트를 작성하려고합니다. 상황 이상한 : I는 어레이의 점화를 선언

export class ValvesComponent implements OnInit { 
    valves: Valve[]; 
    ignitions: number[] = [8, 5, 8, 9, 5, 3]; 
    dates: Date[]; 
    selectedValve: Valve; 
    lineChartData: Array<any>; 

    constructor(private dataService: DataService) { 
    this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions); 
    this.lineChartData = [{data: this.ignitions, label: 'Series Z'}]; 
    } 

: 랜덤 값 번호 []. 그런 다음 생성자에서이 꺾은 선형 차트 데이터에 새 값을 설정하고 있지만 작동하지 않습니다. html 파일의 모든 ignitions 값을 나열하면 모든 것이 정상적으로 작동하며 데이터는 get 메소드가 반환하는 것과 같습니다. 그러나 차트는 여전히 오래된 것을 보여줍니다. 여기 내가 그 데이터를 가져 오는 방법은 다음과 같습니다

getIgnitions(): Promise<number[]> { 
    return this.http.get(this.ignitionsUrl) 
    .toPromise() 
    .then(response => response.json() as number[]) 
    .catch(this.handleError); 

}

및 컨트롤러에서 최종 Java 메소드에서

.

@GetMapping("/valve/findallignitions") 
public Integer [] findAllIgnitions() { 
    Iterable<Valve> valvess = valveRepository.findAll(); 
    List<Integer> valves = new ArrayList<>(); 
    Integer [] valvesArray = {1}; 
    for (Valve v : valvess) { 
     valvesArray = addElement(valvesArray, v.getIgnition()); 
    } 
    return valvesArray; 
} 

데이터를 frm http로 가져 오려면 어떻게해야합니까?

미리 도움을 청하십시오!

Answer 1

이것은 ng2 차트에서 자주 발생하는 문제입니다. ng2 차트에서 차트를 업데이트 할 수 있도록 다시 그리기 메소드를 호출해야합니다. 데이터 변경 사항을 감시하지 않으므로 수동으로 업데이트하도록 지시해야합니다. 구성 요소 내부

@ViewChild(BaseChartDirective) private _chart; 

참조하여 다음과 같이 차트를 새로 고침,

forceChartRefresh() { 
     setTimeout(() => { 
     this._chart.refresh(); 
     }, 10); 
    } 


constructor(private dataService: DataService) { 
    this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions); 
    this.lineChartData = [{data: this.ignitions, label: 'Series Z'}]; 
    this.forceChartRefresh(); 
    }