話不多說直接上程式碼

<canvas width="600" height="400"></canvas>
<script>
    var PieChart = function (ctx) {
        /*繪製工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*繪製餅圖的中心*/
        this.w = this.ctx.canvas.width;
        this.h = this.ctx.canvas.height;
 

        /*圓心*/
        this.x0 = this.w / 2 + 60;
        this.y0 = this.h / 2;
        /*半徑*/
        this.radius = 150;
        /*伸出去的線的長度*/
        this.outLine = 20;
        /*說明的矩形大小*/
        this.rectW = 30;
        this.rectH = 16;
        this.space = 20;
    }
    PieChart.prototype.init = function (data)
 
 {
        /*1.準備資料*/
        this.drawPie(data);
    };
    PieChart.prototype.drawPie = function (data) {
        var that = this;
        /*1.轉化弧度*/
        var angleList = this.transformAngle(data);
        /*2.繪製餅圖*/
        var startAngle = 0;
        angleList.forEach(function (item, i) {
            /*當前的結束弧度要等於下一次的起始弧度*/
 

            var endAngle = startAngle + item.angle;
            that.ctx.beginPath();
            that.ctx.moveTo(that.x0, that.y0);
            that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
            var color = that.ctx.fillStyle = that.getRandomColor();
            that.ctx.fill();
            /*下一次要使用當前的這一次的結束角度*/
            /*繪製標題*/
            that.drawTitle(startAngle, item.angle, color , item.title);
            /*繪製說明*/
            that.drawDesc(i,item.title);
            startAngle = endAngle;
        });
    };
    PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) {
        var edge = this.radius + this.outLine;
        /*x軸方向的直角邊*/
        var edgeX = Math.cos(startAngle + angle / 2) * edge;
        /*y軸方向的直角邊*/
        var edgeY = Math.sin(startAngle + angle / 2) * edge;
        /*計算出去的點座標*/
        var outX = this.x0 + edgeX;
        var outY = this.y0 + edgeY;
        this.ctx.beginPath();
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(outX, outY);
        this.ctx.strokeStyle = color;
        /*畫文字和下劃線*/
        this.ctx.font = '14px Microsoft YaHei';
        var textWidth = this.ctx.measureText(title).width ;
        if(outX > this.x0){
            /*右*/
            this.ctx.lineTo(outX + textWidth,outY);
            this.ctx.textAlign = 'left';
        }else{
            /*左*/
            this.ctx.lineTo(outX - textWidth,outY);
            this.ctx.textAlign = 'right';
        }
        this.ctx.stroke();
        this.ctx.textBaseline = 'bottom';
        this.ctx.fillText(title,outX,outY);

    };
    PieChart.prototype.drawDesc = function (index,title) {
        /*繪製說明*/
        this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH);
        /*繪製文字*/
        this.ctx.beginPath();
        this.ctx.textAlign = 'left';
        this.ctx.textBaseline = 'top';
        this.ctx.font = '12px Microsoft YaHei';
        this.ctx.fillText(title,this.space + this.rectW + 10 , this.space + index * (this.rectH + 10));
    };
    PieChart.prototype.transformAngle = function (data) {
        /*返回的資料內容包含弧度的*/
        var total = 0;
        data.forEach(function (item, i) {
            total += item.num;
        });
        /*計算弧度 並且追加到當前的物件內容*/
        data.forEach(function (item, i) {
            var angle = item.num / total * Math.PI * 2;
            item.angle = angle;
        });
        return data;
    };
    PieChart.prototype.getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    };

    var data = [
        {
            title: '15-20歲',
            num: 6
        },
        {
            title: '20-25歲',
            num: 30
        },
        {
            title: '25-30歲',
            num: 10
        },
        {
            title: '30以上',
            num: 8
        }
    ];

    var pieChart = new PieChart();
    pieChart.init(data);

</script>

效果圖