在Angular 4中更新/重新渲染Charts.js

Question

每当我在API中有一些更改时，尝试重新呈现图表，方法如下：

ngOnChanges(changes: SimpleChanges) {
    const data = changes['data'].currentValue;
    this.draw(data);
}

和绘制函数

private draw(charts) {
 this.charts = charts.map((chart, i) => {
    this.options.title.text = chart.title;
    const options = {
        type: 'bar',
        data: chart,
        options: this.options
    };
    return new Chart(`chart${i}`, options);
 });
 this.charts.forEach(chart => {
    chart.update();
 });
}

您可以看到，我尝试在绘图函数中更新/重新呈现图表。在控制台日志中，我可以看到图表对象已使用新数据更新，但它们只是从页面中消失。我的update方法出了什么问题？

Answer 1

我找到了一个解决方案，我知道这是一个技巧，但目前还可以))所以，基本上我检查图表是否已经存在于DOM中，如果存在，则删除它们并创建新的画布元素。

private removeAction() {
  const block = document.querySelector('#chartsBlock');

   //remove
  while (block.firstChild) {
    block.removeChild(block.firstChild);
  }

   // create
  this.charts.forEach((chart, i) => {
    let canvas = document.createElement('canvas');
    canvas.id = `chart${i}`;
    block.appendChild(canvas);
  });
 }

Answer 2

您可以尝试使用ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

constructor(private detector: ChangeDetectorRef) {}

ngOnChanges(changes: SimpleChanges) {
    const data = changes['data'].currentValue;
    this.draw(data);
    this.detector.detectChanges()
    // if detectChanges() doesn't work, try markForCheck()
}