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

2024-06-02 01:20:38

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

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

Eclipse中导入项目后js报错解决方法
Eclipse中导入项目后js报错的原因与解决方法在我们将项目导入Eclipse后,配置好各种编译条件.加载好jar包.配置好tomcat后发现项目还是报错,(前提是项目本身并没有错误,而是我们在初 ...
ie8 js未指明的错误_修复ueditor百度编辑器在IE8下shCore.js报错'undefined'错误的问题...
ueditor在IE8下点击任意文本框报脚本错误错误问题: 在IE8下出现脚本错误 'undefined' 为空或不是对象的问题出现问题的文件为: 行数:299行文件路径:ueditor\th ...
Eclipse和MyEclipse使用技巧--解决MyEclipse中的js报错的小方法
今天,下了个模版,但是导进去的时候发现js会报错.看了下其他都没有错误.而有一个js报错误,请原谅我有点红色强迫症,不能留一点红色 . 错误如下: Syntax error on token &quo ...
web-packwebpack .\src\main.js .\dist\bundle.js 报错
(1)使用指令 web-pack>webpack .\src\main.js .\dist\bundle.js 报错 (2).问题分析,wbpack版本太高,指令不一样.我的是v4.14.0 ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
requirejs页面刷新失效js报错问题解决方案
插件名称:requirejs 问题:页面刷新后模块载入失效,js报错下载地址:http://www.chtml.cn/topic/show/10816 问题原因: requirejs是先加载本身在加 ...
JS报错：Cannot read property 'type' of undefined
在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误: Uncaught TypeError: Cannot rea ...
百度编辑器回显js报错Uncaught SyntaxError: Invalid or unexpected token
这个错误是因为回显的内容里面包含了回车,导致js报错解决办法如下: $vo['content'] = strreplace(array("\r\n", "\r" ...
JS报错: Uncaught SyntaxError: Invalid shorthand property initializer
JS报错: Uncaught SyntaxError: Invalid shorthand property initializer 如果你的代码报错以上提示, 那么就去检查一下, 对应的代码是不是把 ...

最新文章

热门文章