canvas：绘制柱状统计图2

<!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");

    //y轴
    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(80,80);
    ctx.lineTo(80,h-80);
    ctx.strokeStyle="#333";
    ctx.lineWidth=3;
    ctx.stroke();

    //y轴尖头

    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(80-10,80+30);
    ctx.lineTo(80,80);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(80,80);
    ctx.lineTo(80+10,80+30);
    ctx.stroke();

    //y轴文字
    ctx.textBaseline="top";
    ctx.font="30px SimHei";

    var txt="y";
    ctx.fillText(txt,40,90);

    //x轴文字
    var txt="x";
    ctx.fillText(txt,w-80-40,h-80+20);





    //x轴
    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(80,h-80);
    ctx.lineTo(w-80,h-80);
    ctx.strokeStyle="#333";
    ctx.stroke();


    //x轴尖头

    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(w-80-30,h-80-10);
    ctx.lineTo(w-80,h-80);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap="round";
    ctx.moveTo(w-80,h-80);
    ctx.lineTo(w-80-30,h-80+10);
    ctx.stroke();







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

            var count =list.length;     //获取柱子的个数
            var colwidth =(w-160-20)/(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+80;
                var y=h-80-rh ;


                //绘制每个柱子
                ctx.strokeStyle="#fff";
                ctx.strokeRect(x,y,rw,rh);


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

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

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

            //遍历list数据，给每一根柱子添加value值
            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+80;
                var y=h-80-rh ;


                //每一根柱子添加value值
                ctx.fillStyle="#000";
                ctx.font="24px SimHei";
                ctx.fillText(rh,x+7,y-30);


            }


        }
    });


    //设置随机颜色值
    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：绘制柱状统计图2

猜你喜欢