Question

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

如果我在ngOnChanges()中注释掉数据var更新，则标签会在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来创建图表的实例，然后你可以更新你的图表的数据和标签。

所以首先你必须给出类=＆＃34;图表＆＃34;对于html中的图表

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

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

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

上查看我的其他示例

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

1 个答案: