chart.js 重复绘图问题

简介: chart.js 重复绘图问题
问题:
 
现在页面上有一个canvas,在这个canvas上使用chart.js绘图,页面上进行一些ajx操作之后数据改变,
 
使用新数据在canvas上重新绘图,但之前的图表依然存在,结果就是鼠标在图表上移动的时候,
 
两张图表之间会来回闪动。

解决方案:

每次绘图之前先删除canvas节点,重新添加一个。

<div  id="lineChartParent">
       <canvas id="lineChart" height="230"></canvas>
</div>
 
//先移除
$('#lineChart').remove();
//再追加进div
$('#lineChartParent').append('<canvas id="lineChart" height="230"></canvas>');
相关文章
|
7月前
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
40 0
|
存储 JSON JavaScript
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库,支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
599 0
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
|
5月前
|
移动开发 前端开发 JavaScript
使用JavaScript和Canvas进行绘图
Canvas是HTML5的绘图工具,借助JavaScript实现网页上的图形、图像及动画创作。通过Canvas元素和2D渲染上下文,开发者能绘制图形、处理图像、制作动画,甚至用于游戏开发。基本步骤包括获取Canvas元素、设置绘图属性、绘制形状、处理图像以及实现动画。同时,注意性能优化,如减少不必要的重绘和使用Web Workers。Canvas结合WebGL还能实现3D效果,与Web Audio API结合则能做音频可视化。分享你的Canvas经验,探讨更多创意应用!
47 0
|
7月前
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
42 0
|
7月前
|
前端开发 JavaScript
JS长按保存canvas绘图
JS长按保存canvas绘图
54 0
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
71 0
|
XML 移动开发 前端开发
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
370 0
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
|
架构师
基于D3.js绘图组件的后端架构师技术栈图谱树
基于D3.js绘图组件的后端架构师技术栈图谱树 组件效果 GitHub项目传送门 https://github.com/nqmysb/knowledge_graph 效果预览地址 https://liaocan.top/knowledge_graph/
1985 0
|
JavaScript 前端开发
JavaScript 编程精解 中文第三版 十七、在画布上绘图
十七、在画布上绘图 原文:Drawing on Canvas 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 绘图就是欺骗。
1996 0
|
JavaScript 前端开发
《JavaScript高效图形编程(修订版)》——6.9 画布和递归绘图
下面我们将尝试用更有趣的东西,具体说是用一点三角函数和一点随机元素,来代替简单的递归递减。图6-14显示了递归调用简单的画布画线命令得出的树。递归图形函数的一个显著特点是看起来比较自然,我们可以看到分支的末梢非常精细。
1586 0