基于html5的canvas用javascript写柱状图

于 2016-07-02 16:01:33 发布
阅读量1.1k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： html5 javascript canvas 横向柱状图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jjwxyz/article/details/51811390
本文介绍如何利用HTML5的canvas元素和JavaScript绘制四种不同类型的柱状图，包括纵向单色和多色，以及横向单色和多色。通过调整坐标和设置数据集，可以创建具有不同样式和颜色的柱状图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用HTML5的<canvas>

代码中共有四种形式的柱状图:

1.纵向的一种颜色的柱状图

2.纵向的多种颜色的柱状图

3.横向的一种颜色的柱状图

4.横向的多种颜色的柱状图

四种都很类似，拿第一个举例：

singleColorBarGraph(beginX,beginY,width,height,dataSet,ctx,x1Adjust,y1Adjust,x2Adjust,y2Adjust,x3Adjust,y3Adjust);
传入的参数：

beginX，beginY:柱状图的起始坐标

width,height:柱状图的宽高

dataSet:传入的数据集，多种颜色的和一种颜色的数据集有些小的差别，在接下来的源代码中会看到

ctx:Context对象

x1Adjust,y1Adjust:参考线字符位置调整

x2Adjust,y2Adjust:下标字符位置调整

x3Adjust,y3Adjust:每个量数值字符的位置调整

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <style type="text/css">
        body{
            background-color: #0be;
        }
        canvas{
            background-color: white;
        }
    </style>
    <script type="text/javascript">
        var dataSet={
            'color':'#0be',
            'data':[12,18,29,2,25],
            'flag':['Jan','Feb','Mar','Apr','May']
        };
        var dataSet2={
            'color':['#f00','#0f0','#00f','#ff0','#0ff'],
            'data':[12,11,29,2,25],
            'flag':['Jan','Feb','Mar','Apr','May']
        };
        function maxOfArray(data){
            var max=0;
            for(var i in data){
                if(max<data[i])
                    max=data[i];
            }
            if(max%10){
                max=(Math.ceil(max/10))*10;
            }
            return max;
        }
        function rowHeightFunction(data){
            var maxData=maxOfArray(data);
            var maxDataDiv10=maxData/10;
            if(!(maxDataDiv10%5)){
                return [maxData/5,5];
            }else if(!(maxDataDiv10%3)){
                return [maxData/3,3];
            }else {
                return [maxData/2,2];
            }
        }
        function singleColorBarGraph(beginX,beginY,width,height,dataSet,ctx,x1Adjust=0,y1Adjust=0,x2Adjust=0,y2Adjust=0,x3Adjust=0,y3Adjust=0){
            var i;
            var barNum=dataSet.data.length;//柱的数量
            var barWidth=width/(barNum*2+1);//柱的宽度
            var barPos=width/(barNum+1);//柱的位置
            var horizontalLineDiff=rowHeightFunction(dataSet.data)[0];//水平线的data差
            var horizontalLineNum=rowHeightFunction(dataSet.data)[1];//水平线的数量
            var cellPx=height/horizontalLineNum;
            var pxPerData=height/(horizontalLineDiff*horizontalLineNum);
            ctx.strokeStyle='rgb(202,202,202)';
            ctx.strokeRect(beginX,beginY,width,height);
            for(i=0;i<horizontalLineNum+1;i++){
                var yAxis=(horizontalLineNum-i)*horizontalLineDiff;
                ctx.moveTo(beginX,beginY+i*cellPx);
                ctx.lineTo(beginX+width,beginY+i*cellPx);
                ctx.fillText(yAxis,beginX+x1Adjust,beginY+i*cellPx+y1Adjust);//参考线字符
            }
            for(i=1;i<dataSet.data.length+1;i++){
                ctx.fillStyle='#000';
                ctx.fillText(dataSet.flag[i-1],beginX+i*barPos+x2Adjust,beginY+height+y2Adjust);//下标字符
                ctx.fillText(dataSet.data[i-1],beginX+i*barPos-barWidth/2+x3Adjust,beginY+height-dataSet.data[i-1]*pxPerData+y3Adjust);//每个量对应的值
                ctx.fillStyle=dataSet.color;
                ctx.fillRect(beginX+i*barPos-barWidth/2,beginY+height-dataSet.data[i-1]*pxPerData,barWidth,dataSet.data[i-1]*pxPerData);
            }
            ctx.stroke();
        }
        function mulColorBarGraph(beginX,beginY,width,height,dataSet,ctx,x1Adjust=0,y1Adjust=0,x2Adjust=0,y2Adjust=0,x3Adjust=0,y3Adjust=0){
            var i;
            var barNum=dataSet.data.length;//柱的数量
            var barWidth=width/(barNum*2+1);//柱的宽度
            var barPos=width/(barNum+1);//柱的位置
            var horizontalLineDiff=rowHeightFunction(dataSet.data)[0];//水平线的data差
            var horizontalLineNum=rowHeightFunction(dataSet.data)[1];//水平线的数量
            var cellPx=height/horizontalLineNum;
            var pxPerData=height/(horizontalLineDiff*horizontalLineNum);
            ctx.strokeStyle='rgb(202,202,202)';
            ctx.strokeRect(beginX,beginY,width,height);
            for(i=0;i<horizontalLineNum+1;i++){
                var yAxis=(horizontalLineNum-i)*horizontalLineDiff;
                ctx.moveTo(beginX,beginY+i*cellPx);
                ctx.lineTo(beginX+width,beginY+i*cellPx);
                ctx.fillText(yAxis,beginX+x1Adjust,beginY+i*cellPx+y1Adjust);//参考线字符
            }
            for(i=1;i<dataSet.data.length+1;i++){
                ctx.fillStyle='#000';
                ctx.fillText(dataSet.flag[i-1],beginX+i*barPos+x2Adjust,beginY+height+y2Adjust);//下标字符
                ctx.fillText(dataSet.data[i-1],beginX+i*barPos-barWidth/2+x3Adjust,beginY+height-dataSet.data[i-1]*pxPerData+y3Adjust);//每个量的字符
                ctx.fillStyle=dataSet.color[i-1];
                ctx.fillRect(beginX+i*barPos-barWidth/2,beginY+height-dataSet.data[i-1]*pxPerData,barWidth,dataSet.data[i-1]*pxPerData);
            }
            ctx.stroke();
        }
        function singleColorBarGraphHorizontal(beginX,beginY,width,height,dataSet,ctx,x1Adjust=0,y1Adjust=0,x2Adjust=0,y2Adjust=0,x3Adjust=0,y3Adjust=0){
            var i;
            var barNum=dataSet.data.length;//柱的数量
            var barWidth=height/(barNum+4);//柱的宽度
            var barPos=height/(barNum+1);//柱的位置
            var VerticalLineDiff=rowHeightFunction(dataSet.data)[0];//竖直线的data差
            var VerticalLineNum=rowHeightFunction(dataSet.data)[1];//竖直线的数量
            var cellPx=width/VerticalLineNum;
            var pxPerData=width/(VerticalLineDiff*VerticalLineNum);
            ctx.strokeStyle='rgb(202,202,202)';
            ctx.strokeRect(beginX,beginY,width,height);//绘制矩形框
            for(i=0;i<VerticalLineNum+1;i++){//绘制垂直参考线
                var xAxis=i*VerticalLineDiff;
                ctx.moveTo(beginX+i*cellPx,beginY);
                ctx.lineTo(beginX+i*cellPx,beginY+height);
                ctx.fillText(xAxis,beginX+i*cellPx+x1Adjust,beginY+height+y1Adjust);//参考线的数值
            }
            for(i=1;i<dataSet.data.length+1;i++){
                ctx.fillStyle='#000';
                ctx.fillText(dataSet.flag[i-1],beginX+x2Adjust,beginY+i*barPos+y2Adjust);//下标字符
                ctx.fillText(dataSet.data[i-1],beginX+dataSet.data[i-1]*pxPerData+x3Adjust,beginY+i*barPos-barWidth/2+y3Adjust);//柱代表的数量
                ctx.fillStyle=dataSet.color;
                ctx.fillRect(beginX,beginY+i*barPos-barWidth/2,dataSet.data[i-1]*pxPerData,barWidth);
            }
            ctx.stroke();
        }
        function mulColorBarGraphHorizontal(beginX,beginY,width,height,dataSet,ctx,x1Adjust=0,y1Adjust=0,x2Adjust=0,y2Adjust=0,x3Adjust=0,y3Adjust=0){
            var i;
            var barNum=dataSet.data.length;//柱的数量
            var barWidth=height/(barNum+4);//柱的宽度
            var barPos=height/(barNum+1);//柱的位置
            var VerticalLineDiff=rowHeightFunction(dataSet.data)[0];//竖直线的data差
            var VerticalLineNum=rowHeightFunction(dataSet.data)[1];//竖直线的数量
            var cellPx=width/VerticalLineNum;
            var pxPerData=width/(VerticalLineDiff*VerticalLineNum);
            ctx.strokeStyle='rgb(202,202,202)';
            ctx.strokeRect(beginX,beginY,width,height);//绘制矩形框
            for(i=0;i<VerticalLineNum+1;i++){//绘制垂直参考线
                var xAxis=i*VerticalLineDiff;
                ctx.moveTo(beginX+i*cellPx,beginY);
                ctx.lineTo(beginX+i*cellPx,beginY+height);
                ctx.fillText(xAxis,beginX+i*cellPx+x1Adjust,beginY+height+y1Adjust);//参考线的数值
            }
            for(i=1;i<dataSet.data.length+1;i++){
                ctx.fillStyle='#000';
                ctx.fillText(dataSet.flag[i-1],beginX+x2Adjust,beginY+i*barPos+y2Adjust);//下标字符
                ctx.fillText(dataSet.data[i-1],beginX+dataSet.data[i-1]*pxPerData+x3Adjust,beginY+i*barPos-barWidth/2+y3Adjust);//柱代表的数量
                ctx.fillStyle=dataSet.color[i-1];
                ctx.fillRect(beginX,beginY+i*barPos-barWidth/2,dataSet.data[i-1]*pxPerData,barWidth);
            }
            ctx.stroke();
        }
    </script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<canvas id="myCanvas2" width="400" height="400"></canvas>
<canvas id="myCanvas3" width="400" height="400"></canvas>
<canvas id="myCanvas4" width="400" height="400"></canvas>
<script type="text/javascript">
    var ctx=document.getElementById('myCanvas').getContext('2d');
    singleColorBarGraph(30,20,350,350,dataSet,ctx,-20,5,-10,11,9,-5);
    var ctx2=document.getElementById('myCanvas2').getContext('2d');
    mulColorBarGraph(30,20,350,350,dataSet2,ctx2,-20,5,-10,11,9,-5);
    var ctx3=document.getElementById('myCanvas3').getContext('2d');
    singleColorBarGraphHorizontal(30,20,350,350,dataSet,ctx3,0,15,-27,3,5,22);
    var ctx4=document.getElementById('myCanvas4').getContext('2d');
    mulColorBarGraphHorizontal(30,20,350,350,dataSet2,ctx4,0,15,-27,3,5,22);
</script>
</body>
</html>

演示效果：


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值