canvas：绘制柱状统计图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        canvas{
            background:#9AA4FF;
        }

    </style>
</head>
<body>
<h3>canvas画布：绘制柱状统计图</h3>

<canvas id="HuaBu">
    您的浏览器不支持canvas画布
</canvas>


<script src="js/jquery-1.11.1.js"></script>
<script>

    var w=800;
    var h=600;

    HuaBu.width=w;     //画布的宽
    HuaBu.height=h;    //画布的宽

    //创建画布
    var ctx=HuaBu.getContext("2d");

    //绘制边框轮廓
    ctx.strokeRect(50,50,w-100,h-100);

    //异步请求服务器端数据
    $.ajax({
        type:"GET",
        url:"data/1.json",
        success:function (list) {

            var count =list.length;     //获取柱子的个数
            var colwidth =(w-100)/(count*2+1);     //设置柱子的宽度

            console.log(count);
            console.log(colwidth);

            //遍历list数据，绘制每个柱子
            for(var i=0;i<list.length;i++){

                var data=list[i];     //每个数据
                var rw=colwidth;     //矩形的宽
                var rh= data.value ;      //矩形的高

                var x=(2*i+1)*rw+50;
                var y=h-50-rh ;

                //绘制每个柱子
                ctx.strokeRect(x,y,rw,rh);

                //使用渐变色进行填充
                var g=ctx.createLinearGradient(x,y,x,y+rh);   //创建渐变区域

                g.addColorStop(0,rc());
                g.addColorStop(1,"#fff");

                ctx.fillStyle=g;    //颜色填充样式设置为“渐变对象”
                ctx.fillRect(x,y,rw,rh);
            }
        }
    });


    //设置随机颜色值
    function rc() {
        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+")";
    }


    
</script>


</body>
</html>

JSON

[
  {"label":"部门1","value":300},
  {"label":"部门2","value":400},
  {"label":"部门3","value":120},
  {"label":"部门4","value":330},
  {"label":"部门5","value":350},
  {"label":"部门6","value":230}
]

效果图：

注意：在服务器环境查看

canvas：绘制柱状统计图

猜你喜欢