测试网页中使用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