Chart.js清空canvas画布 clearRect()等canvas方法擦除失败(附完整代码)

一、直接移除DOM对象方式

原因

clearRect()等canvas方法清空失败

方法

移除dom对象的方式

$('#canvas').remove();
$('#container').append('<canvas id="canvas"></canvas>');

二、完整代码

html

<div id="container">
	<canvas id="canvas"></canvas>
</div>

javascript

/**
 *擦除canvas画布
 */
function clearCanvas(){
	$('#canvas').remove();
	$('#container').append('<canvas id="canvas"></canvas>');
	container=document.getElementById("canvas");
	context=container.getContext("2d");
}

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
		}
	}
};

三、效果

饼状图

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值