如何在Angular Chart.js中以异步方式更新数据图

Question

我已经基于 ngx-admin 启动器空的项目(没有所有库(。我导入 angular2-chartjs lib in package.json 。图表正确绘制。

我需要更新 data 当我从服务器接收响应时，在 async Way中。

我阅读了图表的文档。

    function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
    }

但这是 Chartjs ，而Ngx-Admin使用 angular2-chartjs 。

在我的组件中，我用空数据初始化了图表：

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'performance',
  template: `
  <chart type="line" [data]="data" [options]="options"></chart>
`,
  styleUrls: ['./performance.component.scss'],
})
export class PerformanceComponent implements OnDestroy {
  private PERFORMANCE_ENDPOINT = environment.performanceREST;
  data: any;
  options: any;
  themeSubscription: any;
  constructor(private theme: NbThemeService, private restService: TableService, http: Http) {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
      this.data = {
        labels: [],
        datasets: [{
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
          borderColor: colors.primary,
        }, {
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
          borderColor: colors.danger,
        }, {
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
          borderColor: colors.info,
        }],
      };
      this.options = {
        responsive: true,
        maintainAspectRatio: false,
        elements: {
          line: {
            tension: 0,
            fill: false,
          },
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: true,
              color: chartjs.axisLineColor,
            },
            ticks: {
              fontColor: chartjs.textColor,
            },
          }],
          yAxes: [{
            gridLines: {
              display: true,
              color: chartjs.axisLineColor,
            },
            ticks: {
              fontColor: chartjs.textColor,
            },
          }],
        },
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
      };
    });
    // ## HERE I WOULD LIKE TO IMPLEMENT REST HTTP TO RETRIEVE DATA FROM SERVER ##
    // this.restService.endPoint = this.PERFORMANCE_ENDPOINT;
    // this.restService.getElements()
    //   .then((result) => {
    //     // tslint:disable-next-line:no-console
    //     console.log('PerformanceRESULT: ' + result);
    //     this.data.datasets.forEach((dataset) => {
    //       dataset.data.push(result);
    //     });
    //   });
  }
  protected addData(chart, label, data) {
    this.data.labels.push(label);
    this.data.datasets.forEach((dataset) => {
      dataset.data.push(data);
    });
    // chart.update();
  }
  protected removeData(chart) {
    this.data.labels.pop();
    this.data.datasets.forEach((dataset) => {
      dataset.data.pop();
    });
    // chart.update();
  }
  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

这里有人会知道建议解决我的问题吗？(感谢一个例子(。

谢谢

Answer 1

似乎没有触发更改检测https://blog.thoughtram.io/angular/2016/02/02/angular-22/angular-2-change-detection-exlection-explain.html

我通过更新整个选项对象