当图表数据同时更新时，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;
   }
  }
}

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

"chart.js": "^2.4.0", "ng2-charts": "^1.5.0",

Answer 1

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

所以首先你必须在 html 中为图表提供 class= "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-charts update labels and data