Angular 角度2/打底-通过@ViewChild更新图表

我正在使用Angular2为我的应用程序启动。 我有一个带有图表的仪表盘。 我试图更新到Priming rc7（从rc5开始，他们修复了更新图表的问题），但由于他们的更改，我不知道如何更新图表，因为这必须通过调用方法来完成

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

my chart.html：

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

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

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

父组件：

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

我已尝试将@ViewChild添加到我的家长，如下所示：

@ViewChild("linechart") chart: UIChart

然后我在setInterval内调用了refresh（）方法：

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

但是这个.chart没有定义

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

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

在我的孩子身上：

@ViewChild('linechart') chart: UIChart;

正如我所说，我以前从未与@ViewChild合作过，我想我现在还不太了解它，所以如果你们中有人有想法，我会很感激的，如果你们能像我愚蠢一样跟我说话的话！：D

---

提前谢谢

同时更新标签和数据集

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

尝试在chart.refresh（）上设置一个超时，延迟为几秒100毫秒或1200毫秒

它对我有用

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

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

设置值后。

更改图形类型时，下面的代码对我有用。
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.

HTML:
{{item.label}
现在可以在

从'priming/chart'导入{UIChart}

refresh（）
是更新的另一种替代方法。
在；是的，但对于我的仪表板来说，需要单击按钮刷新绝对是最糟糕的情况。：/因此，我需要在我的setInterval中调用它，它在我的父组件中，所以我需要将图表从我的子组件传递给我的父组件，这就是我现在正在寻找的！按钮用于示例，在您的情况下，您肯定需要@ViewChild，当您使用它时，它不是被检索到了吗？哪个部分不起作用=我已经像我在问题中描述的那样使用了它，但是每当我执行console.log（this.chart）或console.log（this.dashcomp.chart）时，我得到的都是“未定义的”。我的import语句是“import{UIChart}from'priming/chart'；”工作起来就像做梦一样
import { UIChart } from "primeng/components/chart/chart";

@ViewChild("chart") chart: UIChart; 

this.chart.reinit(); 

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.