angular - 更新 angular2-chartjs 中的图表数据

Question

我正在使用 angular2-chartjs 创建图表。下面是我的代码

模块

import { ChartModule } from 'angular2-chartjs';

看法

 <div class="col-md-4">
     Login Frequency Filter
     <button (click)="handleClick($event)" type="button">Update Data</button>
 </div>
 <div class="col-md-8">

        <nb-card>
          <nb-card-header>Login Frequency</nb-card-header>
          <nb-card-body>
            <chart #loginChart id="chart" type="line" [data]="data" [options]="pieoptions"></chart>
          </nb-card-body>
        </nb-card>    
 </div>

这是我的组件

 data: any;

  handleClick(event: Event) {
   this.data['datasets'][0] = [99,88,88,77];    
       }
ngAfterViewInit() {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const echarts: any = config.variables.echarts;

      const chartjs: any = config.variables.chartjs;

      this.data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [ {
          data: [18, 48, 77, 9, 100, 27, 40],
          label: 'Events',
          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
          borderColor: colors.info,
        },
        ],
      };    

    });
  }

我在想如果我更新按钮单击事件中的数据，那么它应该自动更新图表中的数据，我看到数据正在更新，但图表不是 redrwan

 handleClick(updated) {
    if(updated)
    {
    // compute new data and store in this.datasets
    this.data.datasets[0].data = [99,99,99,99,99,99,99];
    // just trying refresh full variable
    this.data = this.data.slice();
    }
   }

谢谢

Answer 1

您必须手动刷新如下，

声明一个变量_chart如下，

@ViewChild(BaseChartDirective) private _chart;

您可以使用以下功能刷新，

 forceChartRefresh() {
    setTimeout(() => {
      this._chart.refresh();
    }, 10);
  }

并在更新您的数据后致电，

 this.forceChartRefresh();

Answer 2

@ViewChild("loginChart") 栏：图表组件；

一些方法（）{

/* 你的改变... tus cambios

最后放置以下 al final poner lo siguiente */ this.bar.ngOnInit(); //它应该可以工作 deberia funcionar

}