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();
 });
}

你可以看到我尝试在绘图功能中更新/重新渲染图表。在控制台日志中，我可以看到图表对象已使用新数据更新，但它们只是从页面中消失。我的更新方法有什么问题？

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()
}

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

2 个答案: