更新后ChartJS不会渲染

Question

我试图用以下代码封锁或清除过滤器后更新图表的值

 <div class="col-xs-8 card-container" style="padding: 0 0 0 0">
<mat-card  height="100%" style="padding: 16px 0px 16px 16px !important; height:100%">
    <mat-card-title style="text-align:center;">Gráfica</mat-card-title>
    <mat-card-content>
        <div style="display: block; width: 100%" id="canvasContainer" *ngIf="!emptyData()">
            <canvas  id="myChart"></canvas>   
        </div>
        <div style="display: block; width: 100%" *ngIf="emptyData()">
            <h3>Pendiente de evaluar.</h3>
        </div>
    </mat-card-content> 
</mat-card>

这是我用ID Mychart

在画布上渲染图表的HTML。

这是我生成第一张图表的代码，它仅执行一次，并且起作用

  setup(): void{
const maxValue = this.getMaxValue();
var ctddx = document.getElementById('myChart');
var canvas = <HTMLCanvasElement> document.getElementById('myChart');
if(canvas !== null) {
this.ctx = canvas.getContext("2d");
      this.chart= new Chart(this.ctx, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [{
            data: this.values,
            borderWidth: 3,
            fillColor: this.colors,
            backgroundColor: this.colors,
            borderColor: this.colors
        }]
    },
      options: {
        responsive: true,
        legend: {
            display: false
        },
        hover: {
            mode: 'label'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function (value) { if (Number.isInteger(value)) { return value; } },
                    suggestedMax: maxValue,
                }
            }],
            xAxes: [{
              fontSize: 35,
              barThickness : 65
          }],
        },
        plugins: {
            datalabels: {
                // align: 'start',
                // anchor: 'start',
                clamp: true,
            }
        }
      }
    });
    this.initialized = true;
  }
 }

到目前为止，代码可以正常工作并正确渲染第一张图表。现在，当我尝试应用过滤器或清除过滤器时，它不会渲染任何内容，这是以下代码

 modifyChart(labels,values){
  let oldchart = this.chart;
  this.removeData();
  this.addData(labels,values);
  console.log(oldchart===this.chart);
  }
   removeData() {
    this.chart.data.labels.pop();
    this.chart.data.datasets.forEach((dataset) => {
    dataset.data.pop();
   });
   this.chart.update();
}
 addData(label, data) {
  this.chart.data.labels.push(label);
  this.chart.data.datasets.forEach((dataset) => {
  dataset.data.push(data);
  });
 this.chart.update();
}

它不起作用，它没有渲染，我什至尝试将以前的图表与新图表进行比较，以引入相同的值，并且返回真实，因此即使是相同的图表，它也不会渲染

我认为问题必须是因为Update Deletes de Canvas并再次创建它，但是过了一会儿，我找不到解决方法

Answer 1

好吧，所以我设法解决了这个问题，我希望这个答案可以帮助一个在同一帆布上呈现同一问题的人，如果更新不起作用。

首先，我有这个生命周期方法

  ngAfterContentChecked(): void {
if (!this.initialized && !this.emptyData()) {
    this.setup();
  }
}

所以我可以渲染第一张图表，因为您需要画布准备就绪，所以我总是在等待画布准备好，就像我在问题上发布的方法设置一样准备好<</p>

 setup(): void{
  const maxValue = this.getMaxValue();
  var canvas = <HTMLCanvasElement> document.getElementById('myChart');
  if(canvas !== null) {
        ...
  this.initialized = true;
     }
  }

更新的问题我认为它也会摧毁画布并创建一个具有相同ID的新的画布，因此我认为它试图在画布准备好之前渲染图表，因此我进行了这样的解决方法

应用了所需的所有过滤器并检索新数据

modifyChart() {
this.chart.destroy();
this.initialized = false;
}

使用此代码，我的NGAFTERCONTENTENTECTED将要求进行设置，直到准备就绪，然后更改为True

我知道这可能不是最好的解决方法，但至少它解决了我的问题