Question

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

提供的chart.js的图表包装器

当我给data属性一个静态数组时，这很好用但是，当我使用一个返回值（也是数字数组）的函数时，它不会呈现这是因为他们的实现并没有自动收听更改事实上，在他们的文档中，他们声明刷新应该是手动的

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

UPDATE 我设法使用

获得了图表的参考

@ViewChild
('upDownChart') chart: UIChart;

所以我希望通过在drawGraph函数的末尾调用this.chart.refresh（）它可以工作，但它不是奇怪的是我已经重构了更新（通过点击ui调用）

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

它正在运作

Answer 1

如果你更新到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);

}

How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?

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

Answer 2

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

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

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

Angular 2和PrimeNG图表不能正常渲染

2 个答案: