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

效果请看：饼图

it

功能点包括：

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