角度4折线图数据不显示来自http的数据获取

我正在尝试使用Angular 4和chart.js使用由http get方法提供的数据库中的数据创建折线图。现状是奇怪：角度4折线图数据不显示来自http的数据获取

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文件中列出所有点火值时，一切正常，数据与我的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 GET在我的折线图？

在此先感谢您的帮助！

来源

2017-12-03 up94up

这与NG2-图表的一个常见问题，你将不得不调用再拉法这样NG2，图表知道更新chart.Because它不看数据的变化，你必须手动告诉它更新。

您的组件内部

@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(); 
    }

来源

2017-12-03 02:04:36 Sajeetharan

角度4折线图数据不显示来自http的数据获取

回答

相关问题