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

up9lanfz 于 2023-05-17 发布在 Chart.js

关注(0)|答案(2)|浏览(356)

我有三个图表显示三个不同的服务。因此，创建图表阵列并推送每个新创建的图表。
这是我的代码。

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”的画布。创建新图表并推入数组时出现***错误。我是否需要在创建每个图表后将其销毁？如果是，怎么做？在哪里销毁如果没有，那么解决方案是什么？救命啊！
我从API得到的数据是：
[ {“timestamp”：“：2023-04-18”，“状态”：null，“majorVersion”：“0”，“minorVersion”：“74”，“statusCodes”：[]，“receivedPackets”：8640，“expectedPackets”：8640，“收到”：100，“丢失”：0 }，{“timestamp”：“：2023-04-20”，“状态”：null，“majorVersion”：“0”，“minorVersion”：“74”，“statusCodes”：[]，“receivedPackets”：8639，“expectedPackets”：8640，“收到”：99、“迷失”：1 }，{“timestamp”：“：2023-04-24”，“状态”：null，“majorVersion”：“0”，“minorVersion”：“74”，“statusCodes”：[]，“receivedPackets”：8601，“expectedPackets”：8640，“收到”：99、“迷失”：1 }，{“timestamp”：“：2023-05-11”，“状态”：null，“majorVersion”：“0”，“minorVersion”：“78”，“statusCodes”：[]，“receivedPackets”：8639，“expectedPackets”：8640，“收到”：99、“迷失”：1 } ]

chart.js

来源：https://stackoverflow.com/questions/76235702/canvas-is-already-in-use-chart-with-id-0-must-be-destroyed-before-the-canvas

2条答案

按热度按时间

xpszyzbs1#

如果您不想同时查看图表，您可以简单地销毁当前/最顶部的图表：

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

赞(0）回复(0）举报 2023-05-17

vlju58qv2#

我终于找到了答案。
我需要这样初始化ctx：

let ctx: CanvasRenderingContext2D = canvas.getContext("2d")!; // <--

现在我可以并行显示所有图表。

赞(0）回复(0）举报 2023-05-17

我来回答

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

2条答案

相关问题

热门标签

最新问答