角度 4 折线图数据未显示来自 http get 的数据

up94up 发表于 Dev

up94up

我正在尝试使用 Angular 4 和 chart.js 使用 http get 方法提供的数据库中的数据创建折线图。情况很奇怪：

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'}];
  }

我用随机值声明数组点火：number[]。然后在构造函数中，我为此折线图数据设置新值，但它不起作用。当我在 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-charts 的一个常见问题，您将调用重绘方法，以便 ng2-charts 知道更新图表。因为它不监视数据更改，您必须手动告诉它更新。

在你的组件里面

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。