饼状图面向对象版本_用面向对象做饼状图-CSDN博客

本文链接：https://blog.csdn.net/stopcpp/article/details/53572263

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>饼状图-面向对象版本</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
    <script src="lib/js/konva/konva.js"></script>
    <script src="PieChart.js"></script>
</head>
<body>
    <div id="container">
    </div>
    <script>
    //第一步：创建舞台
    var stage = new Konva.Stage({
        container:'container',
        width:window.innerWidth,//全屏
        height:window.innerHeight
    });
    //第二步：创建层
    var layer = new Konva.Layer();//创建一个层
    stage.add(layer);//把层添加到舞台
    //中心点坐标
    var cenX = stage.width()/2;
    var cenY = stage.height()/2;

    var data = [
        {name:'前端',value:.25,color:'#e0e'},
        {name:'PHP',value:.2,color:'orange'},
        {name:'UI',value:.3,color:'blue'},
        {name:'C++',value:.05,color:'green'},
        {name:'游戏',value:.1,color:'purple'},
        {name:'JAVA',value:.1,color:'teal'},
    ];

    var p = new PieChart({
        x:cenX,
        y:cenY,
        r:100,
        data:data
    });

    p.addToGroupOrLayer(layer);
    layer.draw();

    p.playAnimate();
    </script>
</body>
</html>

PieChart.js

/*
* @Author: Administrator
* @Date:   2016-12-11 10:59:09
* @Last Modified by:   Administrator
* @Last Modified time: 2016-12-11 11:31:10
*/

'use strict';
function PieChart( option ){
    this._init(option);
}
PieChart.prototype = {
    _init:function(option){
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.r = option.r || 0;
        this.data = option.data || [];

        //饼状图所有的物件的组
        this.group = new Konva.Group({
            x:this.x,
            y:this.y
        });
        //饼状图:所有的扇形的组
        this.wedgeGroup = new Konva.Group({
            x:0,
            y:0
        });
        //饼状图：所有的文字的组
        this.textGroup = new Konva.Group({
            x:0,
            y:0
        });

        this.group.add(this.wedgeGroup);
        this.group.add(this.textGroup);

        var self = this;
        var tempAngle = -90;//从-90度开始绘制
        //绘制所有的扇形
        this.data.forEach(function(item,index){
            //把每条数据创建一个扇形
            var angle = 360*item.value;//当前扇形的角度
            //做一个扇形
            var wedge = new Konva.Wedge({
                x:0,            //扇形圆心坐标
                y:0,
                angle:angle,    //扇形的角度
                radius:self.r,     //扇形的半径
                fill:item.color, //扇形的填充颜色
                rotation:tempAngle, //扇形的旋转角度
            });

            self.wedgeGroup.add(wedge);

            //绘制文本的角度
            var textAngle = tempAngle + 1/2*angle;

            //绘制的百分比的文本
            var text  = new Konva.Text({
                x:(self.r+20)*Math.cos(Math.PI/180*textAngle),
                y:(self.r+20)*Math.sin(Math.PI/180*textAngle),
                text:item.value*100 +'%',
                fill:item.color,
            });

            //根据角度判断设置文字的位置
            if( textAngle>90 && textAngle<270){
                text.x(text.x()-text.getWidth());
            }

            self.textGroup.add(text);
            tempAngle += angle;
        });
        //绘制文字

        //绘制圆环的线
        var cir = new Konva.Circle({
            x:0,
            y:0,
            radius:this.r+10,
            stroke:'#ccc',
            strokeWidth:2
        });
        this.group.add(cir);
        this._animateIndex = 0;
    },
    playAnimate:function(){
        var self =  this;

        //根据索引显示动画
        //把所有扇形角度设置为0

        if(this._animateIndex == 0){
            //拿到所有扇形
            this.wedgeGroup.getChildren().each(function(item,index){
                item.angle(0);
            });
        }       
        //展示当前索引对应的动画
        var item = this.wedgeGroup.getChildren()[this._animateIndex];
        item.to({
            angle:this.data[this._animateIndex].value * 360,
            duration:2*this.data[this._animateIndex].value,
            onFinish:function(){
                self._animateIndex ++;
                if(self._animateIndex>= self.data.length){
                    self.animateIndex = 0;
                    return;
                }
                self.playAnimate();
            }
        });
    },
    addToGroupOrLayer:function(arg){
        arg.add(this.group);
    }
};

这里写图片描述