chart.js报错“Canvas is already in use. Chart ...must be destroyed before the canvas can be reused ”

测试网页中使用jQuery调用webapi获取气泡图数据，并用chart.js绘制气泡图时，如果点击两次显示图表按钮，就会报“Uncaught Error: Canvas is already in use. Chart with ID ‘0’ must be destroyed before the canvas can be reused.”的错误。
在这里插入图片描述
从错误提示看，应该是绘制气泡图的canvas已经被占用，再次使用其绘制图形时就出现冲突。从chart.js官网和网上找到两种方法解决该问题。

调用chart.destroy()函数

chart.js官网的API帮助文档中介绍了destroy函数，该函数用于销毁chart实例，清除对象中保存的引用以及关联的事件监听器，该函数须在重新使用canvas绘制新图形之前使用。
本文中在新建chart实例前增加检测代码，如果myBubbleChart对象已经是chart类型实例，则调用destroy函数销毁实例。

					if(myBubbleChart instanceof Chart)
                    {
    
    
                        myBubbleChart.destroy();
                    }
                    
                    myBubbleChart = new Chart(bubbleCanvas, {
    
    
                    type: "bubble",
                    data: data1,
                    options: []
                });

用jQuery清除/新增canvas

另一种方法学自参考文献2，即每次创建chart实例之前，先使用jQuery移除canvas元素，然后再增加一模一样的canvas元素，代码如下所示：

            $('#bubbleChart').remove();
            $('#chartDiv').append('<canvas id="bubbleChart"></canvas>');

上述两种方式都支持重复点击显示图表按钮生成气泡图。

参考文献：
[1]https://www.chartjs.org/docs/latest/developers/api.html
[2]https://blog.csdn.net/qq_43589143/article/details/106038129