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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用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在我的折线图？

在此先感谢您的帮助！

回答：

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

以上是 角度4折线图数据不显示来自http的数据获取 的全部内容， 来源链接： utcz.com/qa/259125.html

回到顶部