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

Question

我正在使用 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();
  }

它正在运行

Answer 1

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

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

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

Answer 2

如果您更新到 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

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

Angular 2 and PrimeNG chart not rendering fine

angular

primeng