Primeng 折线图不会自动更新，仅在 window 刷新时更新

Question

 <p-chart *ngIf="renewData1" type="line"  [data]="renewData1" [options]="lineOptions"></p-chart>

点击

 <button class="goBtn btnText" style="width: 100%;" pButton type="button" label="GO"
                (click)="Go()" icon="filter-icon"></button>

此处数据仅在调整 window 大小后可见。

ts 文件

最初，此数据将加载到图表上

 this.renewData1 = {

        labels: ['2017', '2018', '2019', '2020'],
        datasets: [
            {

                label: 'Average',
                data: [81, 83, 82, 86],
                fill: false,
                borderColor: '#40B870',
                tension: .4,
                backgroundColor: '#40B870',
                datalabels: {
                    align: 'end',
                    anchor: 'end',
                }
            }
        ]
    }

创建新数据

单击按钮后，它将创建一个数据模态。 allcode 是工作文件，因为图表仅在 window resize

后重绘

    Go() {
        this.renewData1.datasets = []
              
               for(loop){
                   this.renewData1.datasets.push({
                               dynamic data
                    
                })
                       }

Answer 1

更新数据集值时不会触发更改检测，您可以试试这个，

    Go() {
           this.renewData1.datasets = []
                  
           for(loop){
             this.renewData1.datasets.push({dynamic data});
           }
           this.renewData1 = {...this.renewData1}; // Do this in the end
}

Answer 2

如前所述，更改检测不会被触发，因为您是在对象内部进行更新，它只会在整个对象（对象引用）发生更改时进行跟踪。

Go() { 
this.renewData1 =  {...this.renewData1, datasets: <*ASSING DYNAMIC DATA*> }
}

在这里您可以直接在创建的新对象中创建和替换数据集。

Primeng 折线图不会自动更新，仅在 window 刷新时更新

Primeng line chart not updating automatically,only update on window refresh

angular

chart.js

primeng