HTML5canvas实现柱型动画报表

最新推荐文章于 2021-06-15 12:21:46 发布

lishengko

最新推荐文章于 2021-06-15 12:21:46 发布

阅读量929

点赞数 1

分类专栏： HTML5 文章标签： html5 canvas canvas柱型报表

本文链接：https://blog.csdn.net/lishengko/article/details/55508269

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

canvas为HTML5的核心标签，可以实现任意图形的绘画，并可通过算法将绘画变成炫酷的动画效果，类似程序开发中的画布，画笔，填充等。基础图形为矩形和圆形，直线，抛物线，在根据相关算法便可画出所需图形，但对程序员的数学和逻辑性要求较高。所有的图形底层都是点，线实现的，只是不同的语言封装好了相关的实现类而已。
基础语法我就不介绍了，实例如下：

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <!-- 移动端适配   全屏  支持屏幕放大缩小的倍率 -->
    <meta name="full-screen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>canvas柱型报表</title>
</head>
<body>
    <canvas id="canvas" style="width: 90%;margin: 0 auto; height: 100%;display: block;">
    </canvas>

</body>
<script src="http://www.zeptojs.cn/zepto.min.js"></script>
<script type="text/javascript">

$(function(){

    var x = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
    var y = new Array(1667406,939590,1283421,887014,1439863,1811419,2105306,2031376,2081872,2006031,1954761,1383265);

    draw("canvas",x,y,1000,1000);

    //canvas标识 id
    //xNames x轴刻度
    //yArea Y轴值
    //width 图表宽度
    //height 图表高度
    function draw(id,xName,yArea,width,height){

        //最大值
        var max = 0;
        //y轴刻度数,y轴刻度单位,y轴最大值
        var yNum,yUnit="",yMax="";
        //y轴刻度
        var yName = new Array();
        //柱形图刻度
        var area= new Array();
        //柱形图高度
        var xHeight = new Array();
        var total=0;
        for(var i=0;i<yArea.length;i++){
            if(max < yArea[i])
                max = yArea[i];
            if(yArea[i]>100000)
                area[i]=parseInt(yArea[i]/10000);
            else
                area[i]=yArea[i];
            total +=parseInt(yArea[i]/10000);
        }
        $(".total").text("总计："+total+"万");
        //初始化y轴最大刻度
        var str_max = parseInt(max).toString();
        yNum = parseInt(str_max.substring(0,1))+1;

        //初始化y轴刻度单位
        var temp = parseInt((max/10000));

        if(temp !=0){
            for(var i=0;i<=temp.toString.length;i++){
                yUnit +="0"; 

            }
        }
        yUnit +="万";

        //初始化y轴刻度

        yName[0]="0";
        for(var i=1;i<=yNum;i++){
            yName[i] = i+yUnit;
        }



        yMax += yNum.toString();
        for(var i=0;i<str_max.length-1;i++){
            yMax +="0"; 
        }

        //初始化参数
        var columNumber = xName.length*2+2;
        var rowNumber = yName.length;
        var columWidth = (width-50)/columNumber;
        var columHeight = height/rowNumber;

        //最大列高
        var maxHeight = height - 50;

        //初始化柱形图高度
        for(var i=0;i<yArea.length;i++){
            xHeight[i]=(yArea[i]/parseFloat(yMax))*(rowNumber-1)*columHeight;
            xHeight[i] = xHeight[i];
        }

        var canvas=document.getElementById("canvas");

        //初始化画图宽，高
        $("#canvas").attr("width",width).attr("height",height);
        //$("#canvas").css("width",width+"px").css("height",height+"px");

        var context = canvas.getContext("2d");

        //清除矩形
        context.clearRect(0, 0, width, height);


        //中心坐标点
        var xPos = columWidth+50;
        //x,y轴描线
        context.fillStyle="black";
        context.strokeStyle="black";
        context.moveTo(xPos, 50);
        context.lineTo(xPos, maxHeight);
        context.lineTo(columWidth*25.5+50, maxHeight);
        context.stroke();

        //y轴刻度
        context.font='20px Arial';
        for(var j=0;j<yName.length;j++){
            context.moveTo(xPos, maxHeight-j*columHeight);
            context.lineTo(xPos-10,maxHeight-j*columHeight);
            var length = context.measureText(yName[j]);
            context.fillText(yName[j],xPos-length.width-15,maxHeight-j*columHeight+5);
            context.stroke();
        }

        //x轴刻度
        context.font='30px Arial';
        for(var j=2;j<columNumber;j=j+2){
            var index = (j/2)-1;
            //context.fillRect(j*columWidth+50, maxHeight - xHeight[index], columWidth, xHeight[index]);
            var length = context.measureText(xName[index]);
            //偏移量
            var offset = (columWidth-length.width)/2+50;
            context.fillText(xName[index],j*columWidth+offset,maxHeight + 30);
            length = context.measureText(area[index]);
            offset = (columWidth-length.width)/2+50;
            //柱形图刻度
            context.strokeText(area[index],j*columWidth+offset,maxHeight -xHeight[index]-20);
        }

        //时间动画（柱形图）  从0开始，1ms更新次刻度
        var currentHeight = 0;
        var Interal = setInterval(function () {
            context.fillStyle="#f26862";
            for(var j=2;j<25;j=j+2){
                var index = (j/2)-1;
                //高度判断
                if(xHeight[index]>=currentHeight){
                    context.fillRect(j*columWidth+50, maxHeight - currentHeight - 1, columWidth, currentHeight);
                }
            }
            currentHeight=currentHeight+10;
            if(currentHeight>=maxHeight)
                clearInterval(Interal);
        }, 1);  
    }
})
</script>
</html>