基于html5的canvas用javascript写柱状图

来源：互联网发布：中科大网络大学报名编辑：程序博客网时间：2024/05/05 22:35

使用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>

演示效果：

0 0