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,
        },
        ],
      };    

    });
  }

我在想如果我在按钮单击事件中更新数据，那么它应该自动更新图表中的数据，因为我看到数据正在更新但图表没有重新显示

 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”）栏：ChartComponent;

some_method（）{

/ * 您的更改... tus cambios

最后输入以下内容最终定居者 * / this.bar.ngOnInit（）; //它应该可以处理deberia funcionar

}

更新angular2-chart.js中的图表数据

2 个答案: