版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26906345/article/details/79497354
一、直接移除DOM对象方式
1.原因
clearRect()等canvas方法清空失败
2.方法
移除dom对象的方式
$('#canvas').remove();
$('#container').append('<canvas id="canvas"></canvas>');
二、完整代码
1.html
<div id="container">
<canvas id="canvas"></canvas>
</div>
2.javascript
/**
*擦除canvas画布
*/
function clearCanvas(){
$('#canvas').remove();
$('#container').append('<canvas id="canvas"></canvas>');
container=document.getElementById("canvas");
context=container.getContext("2d");
}
3.chart.js画图方法
function pieChart(){
clearCanvas();
window.myPie = new Chart(context, config);
}
var config = {
type: 'pie',
data: {
datasets: [{
data: [
40,
30,
20,
10
],
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.green,
window.chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
"优秀",
"良好",
"中等",
"偏差"
]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: '饼状图'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};