Question

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

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

我的chart.html：

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

my 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

提前致谢！

Answer 1

同时更新标签和数据集。

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

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

它对我有用。

Answer 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();

设置值后

。

Answer 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.

Answer 4

现在可以在

下使用

import { UIChart } from 'primeng/chart';

refresh()是另一种更新方法。

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

4 个答案: