0

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

如果我成功注释掉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”，

4

1 回答 1

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

于 2017-03-19T08:33:18.883 回答