Angular 2/PrimeNg - 通过@ViewChild 更新图表答案

【问题标题】：Angular 2/PrimeNg - Update Chart via @ViewChildAngular 2/PrimeNg - 通过@ViewChild 更新图表
【发布时间】：2017-04-07 09:09:06
【问题描述】：

我在我的应用程序中使用 Angular2 和 PrimeNG。我有一个带有图表的仪表板。我尝试更新到 PrimeNG rc7（从 rc5，他们修复了更新图表的问题），但由于他们的更改，我不知道如何更新我的图表了，因为它必须通过调用方法来完成。

我读过@ViewChild 装饰器，但我真的不知道如何使用它。

我的chart.html：

<p-chart #linechart  type="line" #linechart
 id="linechart" [data]="ntwdata" [options]="options">
</p-chart>

我的dashboard.ts：

import { NTWDATA } from '../resources/mock/chartdata';

import { UIChart } from 'primeng/primeng';

@Component({
   selector: 'my-dashboard',
   templateUrl: 'dist/html/dashboard.component.html',
})

export class DashboardComponent {
   ntwdata = NTWDATA;
   options: any;

   constructor() {

   }

   ngOnInit() {

         this.options = {
            animation: false,
            legend: {
               display: true,
               labels: {
                  boxWidth: 0,
               }

            },
            scales: {
               yAxes: [{
                  scaleLabel: {
                     display: true,
                     labelString: "ms"
                  },
                  ticks: {
                     beginAtZero: true,
                     suggestedMax: 100,
                  }

               }],
               xAxes: [{
                  ticks: {
                     beginAtZero: true,
                     maxTicksLimit: 6,
                  }
               }]

            }
      }
   }
}

NTWDATA 每 2.5 秒更新一次，我的数据一切正常。

我的 DashboardComponent 是更新数据的组件的子组件。

父组件：

...
setInterval(()=>{
   NTWDATA.push(//mydata)
},2500);
...

我尝试像这样将@ViewChild 添加到我的父母：

@ViewChild("linechart") chart: UIChart

然后我在 setInterval 中调用了 refresh() 方法：

setInterval(()=>{
   NTWDATA.push(//mydata)
   this.chart.refresh();
},2500);

但是 this.chart 是未定义的。

然后我尝试像这样使用@ViewChild：

@ViewChild(Dashboard) dashcomp: Dashboard;
setInterval(()=>{
       NTWDATA.push(//mydata)
       this.dashcomp.chart.refresh();
    },2500);

在我的孩子身上：

@ViewChild('linechart') chart: UIChart;

正如我所说，我以前从未与@ViewChild 合作过，而且我认为我现在不太了解它，所以如果你们中的任何人有想法，如果你能和我谈谈，我将不胜感激好像我很傻一样！ :D

提前致谢！

【问题讨论】：

有一个关于refresh()的例子； primefaces.org/primeng/#/chart
是的，但是对于我的仪表板来说，需要单击按钮来刷新绝对是最坏的情况。 :/ 因此我需要在我的父组件中的 setInterval 中调用它，所以我需要将图表从我的孩子传递给我的父母，这就是我现在正在寻找的！
Button 用于示例，在您的情况下您肯定需要@ViewChild，在您使用它时不会检索它吗？哪个部分不起作用=
我已经像我在问题中描述的那样使用了它，但我得到的只是“未定义”，每当我执行 console.log(this.chart) 或 console.log(this.dashcomp.图表）。

标签： angular typescript charts primeng

【解决方案1】：

同时更新标签和数据集。

this.chart.data.labels = labels;
this.chart.data.datasets = datasets;

尝试在 chart.refresh() 上设置超时，延迟几秒 100 毫秒或 1 200 毫秒。

它对我有用。

【讨论】：

【解决方案2】：

<p-chart #chart type="bar" [data]="chartData" [options]="options"></p-chart>

然后在你的角度组件中

import { UIChart } from "primeng/components/chart/chart";

获取视图参考（更改“图表”参考）

@ViewChild("chart") chart: UIChart; 

this.chart.reinit();

设置值之后。

【讨论】：

我的导入语句是“import { UIChart } from 'primeng/chart';”像梦一样工作

【解决方案3】：

While changing the graph type, Below code work for me.

    HTML :
    
    <select class="form-control type-selection" (change)="onSelection($event)" style="position: absolute;">
    <option *ngFor="let item of ntwdata" [value]="item.value">{{item.label}}</option> 
    </select>
    <p-chart #linechart  type="line" #linechart id="linechart" [data]="ntwdata [options]="options"></p-chart>


Component :




import { NTWDATA } from '../resources/mock/chartdata'
import { UIChart } from "primeng/components/chart/chart";

@ViewChild('chart', { static: false }) chart: UIChart;
type: any = 'doughnut';
graphType: any;

ngOnInit() {    
    this.ntwdata = NTWDATA ;
    this.graphType = [
      { value: 'doughnut', label: 'doughnut' },
      { value: 'pie', label: 'pie' },
      { value: 'line', label: 'line' }
    ];
  }

onSelection(event) {
    this.type = event.target.value;
    this.ntwdata.type = this.type; //doughnut, Pie, Line
    setTimeout(() => { 
      this.chart.reinit();
    }, 100);
  }
Once you set the value, keep reinit() inside setTimeout method.

【讨论】：

【解决方案4】：

现在可以在

import { UIChart } from 'primeng/chart';

refresh() 是更新的另一种选择。

【讨论】：