Canvas 已经在使用中。必须先销毁 ID 为“0”的图表，然后才能重新使用 ID 为“idpService”的画布

Question

我要显示三种不同服务的三个图表。所以创建图表数组并推送每个新创建的图表。
这是我的代码。

      import Chart from 'chart.js;
      public charts: any;
      canvas: any;
      ctx: any;

      this.canvas = document.getElementById(serviceChart) as HTMLCanvasElement;
      this.ctx = this.canvas.getContext('2d');
        
    
      this.charts.push(new Chart(this.ctx, {
            // The type of chart we want to create
            type: 'bar',
            // The data for our dataset
            data: barChartDataCollection,
            // Configuration options go here
            options: this.barChartOptions
        }));

我正在获取 Canvas 已经在使用中。必须先销毁 ID 为“0”的图表，然后才能重新使用 ID 为“idpService”的画布。 创建新图表并推入数组时出错。创建图表后是否需要销毁每个图表？如果是，如何？在哪里销毁它？如果没有，那么解决方案是什么？请帮忙！

Answer 1

如果你不想同时看到图表，你可以简单地销毁当前/最上面的图表：

(this.charts[this.charts.length - 1] as Chart|undefined)?.destroy();

this.charts.push(new Chart( ......

如果你愿意销毁图表对象，那么将所有图表保存在一个数组中意义不大，只保留当前图表对象就足够了。

此外，在这种情况下，对于顺序图表，只需更改当前图表的数据和选项并调用其

.update()

方法来显示下一个图表几乎总是可能且更简单，因此您不会破坏并重新创建它。

另一个选项是为每个图表创建一个新的画布，这将允许图表并行显示。一个简化的版本是

const serviceCanvas = document.getElementById('serviceChart') as HTMLCanvas;
if(this.charts.length > 0){
   this.canvas = document.createElement('canvas');
   serviceCanvas.parentNode!.appendChild(this.canvas);
}
else{
    this.canvas = serviceCanvas;
}