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>');
相关文章
|
2天前
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
21 0
|
9月前
|
存储 JSON JavaScript
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库,支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
318 0
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
|
2天前
|
前端开发 JavaScript
JS长按保存canvas绘图
JS长按保存canvas绘图
8 0
|
2天前
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
15 0
|
10月前
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
51 0
|
XML 移动开发 前端开发
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
328 0
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
|
架构师
基于D3.js绘图组件的后端架构师技术栈图谱树
基于D3.js绘图组件的后端架构师技术栈图谱树 组件效果 GitHub项目传送门 https://github.com/nqmysb/knowledge_graph 效果预览地址 https://liaocan.top/knowledge_graph/
1923 0
|
前端开发 JavaScript API
Two.js – 为现代浏览器而生的 2D 绘图 API
  Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。   Two.js 有一个内置的动画循环,可搭配其他动画库。
1791 0
|
1天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
2天前
|
XML Web App开发 前端开发
字节FE:JavaScript学习路线图
字节FE:JavaScript学习路线图
10 0