折线图的绘制

折线图的绘制

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width='600' height='400' id='canvas'></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    //1. 模拟数据
    var datasArr = [5500, 7800, 6800, 8200, 7200, 9000];

    //2. 绘制坐标系
    context.moveTo(50, 50);
    context.lineTo(50, 350);
    context.lineTo(550, 350);

    context.strokeStyle = "green";
    context.stroke();

    //3. 算出所有点的坐标系
    var pointArr = [];

    for (var i = 0; i<datasArr.length; i++) {
        //1. 算出每个点的x的值
        var x = 50 + i * 500/(datasArr.length-1);

        //2. 算出每个点的y的值
        var percent = (10000 - datasArr[i])/10000;
        var h = 300 * percent;
        var y = 50 + h;

        var point = {x: x, y: y};

        //把每一个点的对象放到数组中
        pointArr.push(point);
    }

    //4. 开始画折线
    context.beginPath();
    context.moveTo(pointArr[0].x, pointArr[0].y);

    //循环画线
    for (var i = 1; i<pointArr.length; i++) {
        context.lineTo(pointArr[i].x, pointArr[i].y);
    }

    context.strokeStyle = "blue";
    context.stroke();
    
</script>
</body>
</html>

View Code

扇形图的绘制

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width='600' height='400' id='canvas'></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    //1. 模拟数据
    var datasArr = [
        {type: "鼓励师", color: "yellow", count: 150}, 
        {type: "程序员", color: "skyblue", count: 300}, 
        {type: "设计美眉", color: "hotpink", count: 200}, 
        {type: "测试", color: "red", count: 100}, 
        {type: "产品", color: "yellowgreen", count: 80}, 
        {type: "行政", color: "gold", count: 120}];

    //2. 计算出员工总数
    var sum = 0;
    datasArr.forEach(function(obj){
        sum += obj.count;
    });

    //3. 循环画饼
    var startR = 0;
    for (var i = 0; i < datasArr.length; i++) {
        //算出每一块饼的弧度的大小
        var r = datasArr[i].count / sum * 2 * Math.PI; 

        //结束弧度
        var endR = startR + r;

        //画扇形
        context.beginPath();
        context.arc(300, 200, 150, startR, endR);
        context.lineTo(300, 200);
        context.closePath();
        context.fillStyle = datasArr[i].color;
        context.fill();

        //画下一块饼时，起始弧度就是上一块饼的结束弧度
        startR = endR;
    }
    
</script>
</body>
</html>

猜你喜欢