Angular 2 和 PrimeNG 图表无法正常渲染

Angular 2 and PrimeNG chart not rendering fine

我正在使用 http://www.primefaces.org/primeng/#/chart

提供的 chart.js 图表包装器

当我给数据属性一个静态数字数组时,这很好用 但是,当我使用 returns 一个值(也是数字数组)的函数时,它不会呈现 这是因为他们的实现不会自动监听变化 事实上,在他们的文档中,他们声明刷新应该是手动的

update(chart: UIChart) {
    this.data = //reload
    chart.refresh();
}

我的问题是如何从控制器引用图表:UIChart,这样我就可以在需要时调用它的刷新方法 这是我当前的实现(因为数据是空的,所以没有绘图)

constructor(private stationService : StationComplianceService) { }

  ngOnInit() {
    this.getStationTypes();
  }

  // ngAfterViewInit(chart: UIChart) {
  //   this.drawGraph(this.processStationType(this.graphData)); not working
  // }


  update(chart: UIChart) {
      chart.refresh();
  }

drawGraph(graphData){
  this.data = {
    labels: ['Up Devices', 'Down Devices'],
    datasets: [
        {
            data: graphData,
            backgroundColor: [
                "#4dd0e1",
                "#4fc3f7"
            ],
            hoverBackgroundColor: [
                "#00acc1",
                "#039be5"
            ]
        }]
    };
}



  getStationTypes(){
    this.stationService.subscribeToComplianceService()
      .subscribe(
        graphData => {
          this.graphData = graphData;
          this.drawGraph(this.processStationType(graphData)); etc etc

更新 我设法通过使用

获得了图表的参考
@ViewChild
('upDownChart') chart: UIChart;

所以我希望通过在 drawGraph 函数的末尾调用 this.chart.refresh() 它会起作用,但它不起作用 奇怪的是我重构了更新(通过点击 ui)

update() {
      this.chart.refresh();
  }

它正在运行

解决方案是给它一个小的超时

setTimeout(() => this.chart.refresh(), 100);

https://github.com/primefaces/primeng/issues/1422

如果您更新到 primeng 4.0.0-rc.1,您可以更轻松地处理数据刷新,尤其是在异步时。这是一个例子:

   changeData() {
            this.changedData = {
                labels: ['X','Y','Z'],
                datasets: [
                    {
                        data: [200, 200, 50],
                        backgroundColor: [
                            "#50f442",
                            "#f441c4",
                            "#4195f4"
                        ],
                        hoverBackgroundColor: [
                            "#50f442",
                            "#f441c4",
                            "#4195f4"
                        ]
                     }]
            }
            this.data = Object.assign({}, this.changedData);

}

https://github.com/primefaces/primeng/issues/2235