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

最新推荐文章于 2024-08-04 17:09:52 发布

nodrin

最新推荐文章于 2024-08-04 17:09:52 发布

阅读量1.3w

点赞数 2

分类专栏： javascript 文章标签： chart.js javascript canvas

本文链接：https://blog.csdn.net/qq_26906345/article/details/79497354

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Chart.js清空canvas画布 clearRect等canvas方法擦除失败

一、直接移除DOM对象方式
- 原因
- 方法
二、完整代码
三、效果

一、直接移除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
		}
	}
};