当图表数据同时更新时，ng-charts不更新标签

Question

当我在ngOnChanges()中同时更新图表数据时，我的ng2-charts组件没有更新其标签。

如果我注释掉 ngOnChanges() 中的数据变量更新，则 UI 中的标签更新成功。如何更新我的数据和标签？

我会包括我的 HTML 和调用类，但没有看到明显的问题 - 如果您要求它，我会在这里发布它。

为什么当我取消注释数据更新时标签没有更新...数据更新得很好(以及其他图表变量(

import { Component, Input, OnInit, NgZone, OnChanges } from '@angular/core';
@Component({
  selector: 'app-bar-chart-demo',
  templateUrl: './bar-chart-demo.component.html',
  styleUrls: ['./bar-chart-demo.component.css'],
  inputs:['chartLabel', 'chartData']
})
export class BarChartDemoComponent{
  public barChartOptions:any = {
    scaleShowVerticalLines:false,
    responsive:true
  };
  //Labels
  public barChartLabel:string[];
  @Input() chartLabel:string[];
  //Data
  public barChartData:any[];
   @Input() chartData:string[];
  ngOnChanges(){
   // this.barChartData=this.chartData;
  this.barChartLabel=this.chartLabel; 
  } 
   ngOnInit(){
     this.barChartLabel=this.chartLabel;
    console.log("in onInit "+this.chartData);
     this.barChartData=this.chartData;
   }
  }
}

我的包.json显示以下图表库

"图表.js"： "^2.4.0"，"ng2-charts"： "^1.5.0"，

Answer 1

我认为更新图表的正确方法，特别是具有多条线的折线图是在组件中导入ViewChild和ElementRef，然后您必须导入BaseChartDirective来创建图表的实例，然后您可以更新图表的数据和标签。

所以首先你必须为HTML中的图表提供类="chart">

<div class="chart">
            <canvas baseChart [datasets]="barChartData" [labels]="barChartLabel"  [options]="barChartOptions">
            </canvas>
        </div>

如果您注意到我正在使用 datasets 属性来绑定数据而不是 data 属性;现在对于组件，您必须尊重您提供的数据的结构：

private datasets_lines: { label: string, data: Array<any> }[]

现在完整的代码应该是这样的：

    import { Component, Input, OnInit, NgZone, OnChanges, ViewChild, ElementRef  } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
    @Component({
      selector: 'app-bar-chart-demo',
      templateUrl: './bar-chart-demo.component.html',
      styleUrls: ['./bar-chart-demo.component.css'],
      inputs:['chartLabel', 'chartData']
    })
    export class BarChartDemoComponent{
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
      public barChartOptions :any = {
        scaleShowVerticalLines:false,
        responsive:true
      };
      //Labels
      public barChartLabel :string[];
      //Data
      public barChartData: { label: string, data: Array<any> }[]=[];
      ngOnChanges(){ 
// do your changes here
setTimeout(() => {
       this.barChartData=this.chartData;
      this.barChartLabel=this.chartLabel;
            //console.log(this.barChartData);
            if (this.chart && this.chart.chart && this.chart.chart.config) {
                this.chart.chart.config.data.labels = this.barChartLabel;
                this.chart.chart.config.data.datasets = this.barChartData;
                this.chart.chart.config.data.options = this.barChartOptions;
                this.chart.chart.update();
            }
        });
      } 
       ngOnInit(){
         this.barChartLabel=['23 mei', '24 mei', '25 mei', '26 mei', '27 mei', '28 mei', '29 mei'];
         this.barChartData=[
         { data: [15, 29, 24, 21, 26, 15, 10], label: 'Opening/Time' },
         { data: [11, 20, 27, 26, 22, 17, 11], label: 'Closing/Time' }
     ];
       }
      }
    }

注意：您必须检查数据的数量是否等于数字 的标签

您可以在此链接上查看我的其他示例 ng2-图表更新标签和数据