canvas图表(3) - 饼图

原文地址：canvas图表(3) - 饼图

这几天把canvas图表都优化了下，动画效果更加出色了，可以说很逼近Echart了。刚刚写完的饼图，非常好的实现了既定的功能，交互的动画效果也是很棒的。

效果请看：饼图https://edwardzhong.github.io/sites/demo/dist/chartpie.html

功能点包括：

1. 组织数据；
2. 画面绘制；
3. 数据动画的实现；
4. 鼠标事件的处理。

使用方式

饼图的数据方面要简单很多，因为不用多个分组的数据。把所有的数据相加得出总数，然后每个数据分别求出百分比，有了百分比再相乘360度的弧度得出每个数据在圆盘中对应的要显示的角度。

	var con=document.getElementById('container');
	var pie=new Pie(con);
	pie.init({
		title:'网站用户访问来源',
		toolTip:'访问来源',
	    data:[
	        {value:435, name:'直接访问'},
	        {value:310, name:'邮件营销'},
	        {value:234, name:'联盟广告'},
	        {value:135, name:'视频广告'},
	        {value:1548, name:'搜索引擎'}
	    ]
	});

代码结构

因为为了同时实现新增动画和更新动画，这次的代码结构经过了重构和优化，跟之前的有比较大的区别。

	class Line extends Chart{
		constructor(container){
			super(container);
		}
		// 初始化
		init(opt){

		}
		// 绑定事件
		bindEvent(){

		}
		// 显示信息
		showInfo(pos,arr){

		}
		// 清除内容再绘制
		clearGrid(index){

		}
		// 执行数据动画
		animate(){

		}
		// 执行
		create(){

		}
		// 组织数据
		initData(){

		}
		// 绘制
		draw(){

		}
	}

组织数据

这次把组织数据的功能单独拎了出来，这样方便重用和修改。然后还要给动画对象增加是否创建的属性create和上次最后更新的度数last，为什么呢？因为我们要同时实现创建和更新图形的动画效果。

	initData(){
		var that=this,
			item,
			total=0;
		if(!this.data||!this.data.length){return;}
		this.legend.length=0;
		for(var i=0;i<this.data.length;i++){
			item=this.data[i];
			// 赋予没有颜色的项
			if(!item.color){
				var hsl=i%2?180+20*i/2:20*(i-1);
				item.color='hsla('+hsl+',70%,60%,1)';
			}
			item.name=item.name||'unnamed';

			this.legend.push({
				hide:!!item.hide,
				name:item.name,
				color:item.color,
				x:50,
				y:that.paddingTop+40+i*50,
				w:80,
				h:30,
				r:5
			});

			if(item.hide)continue;
			total+=item.value;
		}

		for(var i=0;i<this.data.length;i++){
			item=this.data[i];
			if(!this.animateArr[i]){//创建
				this.animateArr.push({
					i:i,
					create:true,
					hide:!!item.hide,
					name:item.name,
					color:item.color,
					num:item.value,
					percent:Math.round(item.value/total*10000)/100,
					ang:Math.round(item.value/total*Math.PI*2*100)/100,
					last:0,
					cur:0
				});
			} else {//更新
				if(that.animateArr[i].hide&&!item.hide){
					that.animateArr[i].create=true;
					that.animateArr[i].cur=0;
				} else {
					that.animateArr[i].create=false;
				}
				that.animateArr[i].hide=item.hide;
				that.animateArr[i].percent=Math.round(item.value/total*10000)/100;
				that.animateArr[i].ang=Math.round(item.value/total*Math.PI*2*100)/100;
			}
		}
	}

绘制

饼图的绘制功能很简单，因为不用坐标系，只需要绘制标题和标签列表。

	draw(){
		var item,ctx=this.ctx;
		ctx.fillStyle='hsla(0,0%,30%,1)';
		ctx.strokeStyle='hsla(0,0%,20%,1)';
		ctx.textBaseLine='middle';
		ctx.font='24px arial';

		ctx.clearRect(0,0,this.W,this.H);
		if(this.title){
			ctx.save();
			ctx.textAlign='center';
			ctx.font='bold 40px arial';
			ctx.fillText(this.title,this.W/2,70);
			ctx.restore();
		}
		ctx.save();
		for(var i=0;i<this.legend.length;i++){
			item=this.legend[i];
			// 画分类标签
			ctx.textAlign='left';
			ctx.fillStyle=item.color;
			ctx.strokeStyle=item.color;
			roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
			ctx.globalAlpha=item.hide?0.3:1;
			ctx.fill();
			ctx.fillText(item.name,item.x+item.w+20,item.y+item.h-5);
		}
		ctx.restore();
	}

执行绘制饼图动画

动画区分了创建和更新，这样用户很容易就能看出数据的比例关系变化，也就更加的直观。创建就是从0弧度到指定的弧度，只有数值的增加；而更新动画就要区分增加和减少的情况，因为当用户点击某个标签的时候，会隐藏显示某个分类的数据，于是需要重新计算每个分类的比例，那么相应的分类百分比就会增加或减少。我们根据当前最新要达到的比例ang和已经执行完的当前比例last的进行对比，相应执行增加和减少比例，动画原理就是这样。

canvas绘制圆形context.arc(x,y,r,sAngle,eAngle,counterclockwise);只要我们指定开始角度和结束角度就会画出披萨饼一样的效果，所有的披萨饼加起来就是一个圆。

	animate(){
		var that=this,
			ctx=that.ctx,
			canvas=that.canvas,
			item,startAng,ang,
			isStop=true;

		(function run(){
			isStop=true;
			ctx.save();
			ctx.translate(that.W/2,that.H/2);
			ctx.fillStyle='#fff';
			ctx.beginPath();
			ctx.arc(0,0,that.H/3+30,0,Math.PI*2,false);
			ctx.fill();
			for(var i=0,l=that.animateArr.length;i<l;i++){
				item=that.animateArr[i];
				if(item.hide)continue;
				startAng=-Math.PI/2;
				that.animateArr.forEach((obj,j)=>{
					if(j<i&&!obj.hide){startAng+=obj.cur;}
				});

				ctx.fillStyle=item.color;
				if(item.create){//创建动画
					if(item.cur>=item.ang){
						item.cur=item.last=item.ang;
					} else {
						item.cur+=0.05;
						isStop=false;
					}
				} else {//更新动画
					if(item.last>item.ang){
						ang=item.cur-0.05;
						if(ang<item.ang){
							item.cur=item.last=item.ang;
						}
					} else {
						ang=item.cur+0.05;
						if(ang>item.ang){
							item.cur=item.last=item.ang;
						}
					}
					if(item.cur!=item.ang){
						item.cur=ang;
						isStop=false;
					}
				}

				ctx.beginPath();
				ctx.moveTo(0,0);
				ctx.arc(0,0,that.H/3,startAng,startAng+item.cur,false);
				ctx.closePath();
				ctx.fill();
			}
			ctx.restore();
			if(isStop) {
				that.clearGrid();
				return;
			}
			requestAnimationFrame(run);
		}());
	}

交互处理

执行完动画后，我这里再执行了一遍清除绘制，这个也是鼠标触摸标签和饼图时的对应动画方法，会绘制每个分类的名称描述，更方便用户查看。

	clearGrid(index){
		var that=this,
			ctx=that.ctx,
			canvas=that.canvas,
			item,startAng=-Math.PI/2,
			len=that.animateArr.filter(item=>!item.hide).length,
			j=0,angle=0,
			r=that.H/3;
		ctx.clearRect(0,0,that.W,that.H);
		that.draw();
		ctx.save();
		ctx.translate(that.W/2,that.H/2);

		for(var i=0,l=that.animateArr.length;i<l;i++){
			item=that.animateArr[i];
			if(item.hide)continue;
			ctx.strokeStyle=item.color;
			ctx.fillStyle=item.color;
			angle=j>=len-1?Math.PI*2-Math.PI/2:startAng+item.ang;
			ctx.beginPath();
			ctx.moveTo(0,0);
			if(index===i){
				ctx.save();
				// ctx.shadowColor='hsla(0,0%,50%,1)';
				ctx.shadowColor=item.color;
				ctx.shadowBlur=5;
				ctx.arc(0,0,r+20,startAng,angle,false);
				ctx.closePath();
				ctx.fill();
				ctx.stroke();
				ctx.restore();
			} else {
				ctx.arc(0,0,r,startAng,angle,false);
				ctx.closePath();
				ctx.fill();
			}
			//画分类描述
			var tr=r+40,tw=0,
				tAng=startAng+item.ang/2,
				x=tr*Math.cos(tAng),
				y=tr*Math.sin(tAng);

			ctx.lineWidth=2;
			ctx.lineCap='round';
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(x,y);
			if(tAng>=-Math.PI/2&&tAng<=Math.PI/2){
				ctx.lineTo(x+30,y);
				ctx.fillText(item.name,x+40,y+10);
			} else {
				tw=ctx.measureText(item.name).width;//计算字符长度
				ctx.lineTo(x-30,y);
				ctx.fillText(item.name,x-40-tw,y+10);
			}

			ctx.stroke();
			startAng+=item.ang;
			j++;
		}
		ctx.restore();
	}

事件处理

mousemove的时候，触摸标签和触摸饼图都是基本相同的效果，选中的分类扩大半径，同时增加阴影，以达到凸出来的动画效果，具体实现请看上面的clearGrid方法。判断是否点中都是使用isPointInPath这个api，之前已经介绍过，不再细讲。

mousedown某个击标签就会显示隐藏对应分类，每次触发就会看到饼图的比例变化的动画效果，这个和之前的柱状图和折线图的功能一致。

	bindEvent(){
		var that=this,
			canvas=that.canvas,
			ctx=that.ctx;
		if(!this.data.length) return;
		this.canvas.addEventListener('mousemove',function(e){
			var isLegend=false;
			var box=canvas.getBoundingClientRect(),
				pos = {
				x:e.clientX-box.left,
				y:e.clientY-box.top
			};
			// 标签
			for(var i=0,item,len=that.legend.length;i<len;i++){
				item=that.legend[i];
				roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
				if(ctx.isPointInPath(pos.x*2,pos.y*2)){
					canvas.style.cursor='pointer';
					if(!item.hide){
						that.clearGrid(i);
					}
					isLegend=true;
					break;
				}
				canvas.style.cursor='default';
				that.tip.style.display='none';
			}

			if(isLegend) return;
			// 图表
			var startAng=-Math.PI/2;
			for(var i=0,l=that.animateArr.length;i<l;i++){
				item=that.animateArr[i];
				if(item.hide)continue;
				ctx.beginPath();
				ctx.moveTo(that.W/2,that.H/2);
				ctx.arc(that.W/2,that.H/2,that.H/3,startAng,startAng+item.ang,false);
				ctx.closePath();
				startAng+=item.ang;
				if(ctx.isPointInPath(pos.x*2,pos.y*2)){
					canvas.style.cursor='pointer';
					that.clearGrid(i);
					that.showInfo(pos,that.toolTip,[{name:item.name,num:item.num+' ('+item.percent+'%)'}]);
					break;
				}
				canvas.style.cursor='default';
				that.clearGrid();
			}

		},false);
		this.canvas.addEventListener('mousedown',function(e){
			e.preventDefault();
			var box=that.canvas.getBoundingClientRect();
			var pos = {
				x:e.clientX-box.left,
				y:e.clientY-box.top
			};
			for(var i=0,item,len=that.legend.length;i<len;i++){
				item=that.legend[i];
				roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
				if(ctx.isPointInPath(pos.x*2,pos.y*2)){
					that.data[i].hide=!that.data[i].hide;
					that.create();
					break;
				}
			}
		},false);

	}

最后

所有图表代码请看chart.js