Question

我正在尝试使用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'}];
  }

我声明了数组点火：带有随机值的数字[]。然后在构造函数中，我为此折线图数据设置了新值，但它不起作用。当我列出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在我的折线图中？

提前感谢您的帮助！

Answer 1

这是ng2-chart的一个常见问题，你将调用重绘方法，因此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();
  }

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

1 个答案: