绘制饼状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600px" height="400px" style="border: 1px solid #eeeeee"></canvas>
<script>
    var PieChart = function () {
        this.ctx = document.querySelector('canvas').getContext('2d')
        //获取画布的中心
        this.x0 = this.ctx.canvas.width / 2 + 60;
        this.y0 = this.ctx.canvas.height / 2;
        //半径
        this.radius = 150;
        //自定义超出半径的长度
        this.outLine = 20;
    }
    //初始化
    PieChart.prototype.init = function () {
        this.drawPie();
    }
    //添加饼图
    PieChart.prototype.drawPie = function () {
        //1.转化为弧度
        var angleList = this.drawAngle()
        var start = 0;//记录起始弧度
        angleList.forEach(function (item, i) {
            var end = start + item.angle;
            this.ctx.beginPath();
            this.ctx.moveTo(this.x0, this.y0)
            this.ctx.arc(this.x0, this.y0, this.radius, start, end)
            //设置扇形的随机颜色
            this.ctx.fillStyle = this.randomColor();
            this.ctx.fill();
            var color = this.ctx.fillStyle
            //调用标题的方法
            this.drawTitle(start, item.angle, color, item.title);
            //调用说明
            this.drawText(color, item.title, i);
            start = end;
        }.bind(this))
    }
    //添加标题
    PieChart.prototype.drawTitle = function (start, angle, color, title) {
        //1.确定从圆心到标题线 = 半径 + 超出半径部分
        //2.对边 即 y轴方向的长度 = 斜边 *sin(角度)
        //3.临边 即 x轴方向的长度 = 斜边*cos(角度)
        //4.计算标题的横纵坐标
        //      outX = x0 + (radius + outLine)*cos(角度)
        //      outY = y0 + (radius + outLine)*sin(角度)
        //5.角度在canvas用弧度 = 当前扇形的起始弧度 + 对应弧度的一半
        //斜边的长度
        var edge = this.radius + this.outLine;
        //x轴方向的直角边
        var edgeX = edge * Math.cos(start + angle / 2);
        //y轴方向的直角边
        var edgeY = edge * Math.sin(start + angle / 2);
        //标题的横纵坐标
        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.stroke();

        if (outX >= this.x0) {
            this.ctx.beginPath()
            this.ctx.font = '14px 宋体'
            this.ctx.fillStyle = color;
            this.ctx.textAlign = 'left'
            this.ctx.textBaseline = 'bottom';
            this.ctx.fillText(title, outX, outY)
            this.ctx.moveTo(outX, outY)
            this.ctx.lineTo(outX + this.ctx.measureText(title).width, outY)
            this.ctx.stroke()
        } else {
            this.ctx.beginPath()
            this.ctx.font = '14px 宋体'
            this.ctx.fillStyle = color;
            this.ctx.textAlign = 'right'
            this.ctx.textBaseline = 'bottom'
            this.ctx.fillText(title, outX, outY)
            this.ctx.moveTo(outX, outY)
            this.ctx.lineTo(outX - this.ctx.measureText(title).width, outY)
            this.ctx.stroke()
        }
    }
    //添加说明
    PieChart.prototype.drawText = function (color, title, i) {
        this.ctx.beginPath();
        this.ctx.fillRect(20, 20 + i * 30, 30, 15)
        this.ctx.fillStyle = color;
        this.ctx.fill()
        this.ctx.textAlign='left';
        this.ctx.fillText(title,60,35 + i * 30);
    }
    //添加转化为弧度的方法
    PieChart.prototype.drawAngle = function () {
        //先获取数据的总和
        var total = 0;
        data.forEach(function (item, i) {
            total += item.num;
        })
        //获取每条数据的弧度
        data.forEach(function (item, i) {
            var angle = item.num / total * 2 * Math.PI;
            item.angle = angle;
        })
        return data;
    }

    //添加随机颜色
    PieChart.prototype.randomColor = 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: "20岁以下", num: 6},
        {title: "20岁-25岁", num: 30},
        {title: "26岁-30岁", num: 20},
        {title: "30岁以上", num: 4}
    ]
    var picChart = new PieChart();
    picChart.init();

</script>
</body>
</html>
猜你喜欢
