js 创建条形图

Js封装条形图：

     调用方式：

           var cor={};

        cor.XInfo=[10,30,50,90];//y轴的对应每个节点的信息，属性必须为XInfo

       cor.YInfo=['一月','二月','三月','四月',30,40,60,70];//x轴每个节点的信息 属性必须为YInfo

           cor.percent=[0.2,0.4,0.13,0.35,0.7,0.51,0.3,0.91];//x轴每个节点占y轴最大 的百分比 属性必须为 percet

       cor.color=['red','green','black','orange','yellow','blue'];//可以不写 属性必须为color

           canvas.drawBarChart(camvasNode,cor);

源代码如下所示：

       var canvas={};
canvas.XInfo={};
canvas.XInfo.X_height=[20,40,60,80,100];
canvas.width=0;
canvas.height=0;
canvas.widthX=0;//x轴高度
canvas.widthY=0;//y轴高度
canvas.spaceY=0;//Y间隔
canvas.spaceX=0;//X间隔
canvas.coordinate={};
canvas.coordinate.height=0;//x坐标高度
canvas.coordinate.width=0;//y坐标长度
canvas.origin={x:0,y:0};//原点的x，y坐标

canvas.init=function(canvasNode){
canvas.width=canvasNode.width;
canvas.height=canvasNode.height;
canvas.widthY=canvas.height*0.8;
canvas.widthX=canvas.width*0.8;
};

/**
* 画条形图
* @param canvasNode canvas对象
* @param coordinate 是一个对象 必须包含有 XInfo（X轴信息）,YInfo（Y轴信息）,color（条形图对应颜色，可以为空）,prrcent（每个条形图所占中的百分比）,都是数组
*/
canvas.drawBarChart=function(canvasNode,coordinate){
canvas.init(canvasNode);
var context=canvas.get2DContext(canvasNode);
var startLinePosX=canvas.width-canvas.widthX;
var startLinePosY=canvas.height-canvas.widthY;
context.beginPath();
context.moveTo(startLinePosX,startLinePosY);
context.lineTo(startLinePosX,canvas.widthY);
canvas.origin.x=startLinePosX;
canvas.coordinate.height=canvas.widthY-startLinePosY;
context.moveTo(startLinePosX,canvas.widthY);
context.lineTo(canvas.widthX,canvas.widthY);
canvas.origin.y=canvas.widthY;
canvas.coordinate.width=canvas.widthX-startLinePosX;
context.fill();//填充
context.stroke();//画线
canvas.drawArraw(context,{midX:startLinePosX,midY:startLinePosY},true);
canvas.drawArraw(context, {midX:canvas.widthX,midY:canvas.widthY},false);

/* canvas.drawCoordinate(context,[10,20,30,40,50,60,70,80,90],null,null,true);
canvas.drawCoordinate(context,['一月','二月','三月','四月','五月','六月','七月'],null,[0.3,0.4,0.5,0.9,0.19,0.8,0.78,0.99,0.12],false);
*/
canvas.drawCoordinate(context,coordinate.XInfo,null,null,true);
console.info(coordinate.YInfo);
canvas.drawCoordinate(context,coordinate.YInfo,coordinate.color,coordinate.percent,false);
};

/**
* @param context 画布
* @param pos 画布位置 必须包含箭头中点位置:midX,midY,箭头左边最底高度：height,宽度
*/
canvas.drawArraw=function(context,pos,isVertical){
context.moveTo(pos.midX,pos.midY);
context.lineWidth+=context.lineWidth;
if(!isVertical){
context.lineTo(pos.midX-9,pos.midY+4);
context.moveTo(pos.midX,pos.midY);
context.lineTo(pos.midX-9,pos.midY-4);
context.fill();//填充
context.stroke();//画线
}else{
context.lineTo(pos.midX-4,pos.midY+9);
context.moveTo(pos.midX,pos.midY);
context.lineTo(pos.midX+4,pos.midY+9);
context.fill();//填充
context.stroke();//画线
}
context.lineWidth=context.lineWidth-1;
};

/**
* 画坐标
* @param 画布
* @param x或者y的坐标信息
* @param 是否是垂直方向
*/
canvas.drawCoordinate=function(context,XOrY_heightArr,color,percent,isVerticial){
var xOrigin=canvas.origin.x;//原点x坐标
var yOrigin=canvas.origin.y;//原点y坐标
var widthX=canvas.coordinate.width;
var heightY=canvas.coordinate.height;
var section=XOrY_heightArr==null?0:XOrY_heightArr.length;
var info=XOrY_heightArr;
var perSize=0;//每个坐标之间的距离
var actWidth=widthX-canvas.width*0.09;
var actHeight=heightY-canvas.height*0.09;
var tmpColor=['#FFA500','#EE7AE9','#E0FFFF','#AAAAAA','#8E8E8E','#8B1A1A','#76EE00','#525252','342354','362575','257436','246356','#00EE00','#4B0082'];
color=color==null?tmpColor:color;

if(isVerticial&§ion==0){
info=canvas.XInfo.X_height;
}

if(isVerticial){
perSize=actHeight/info.length;
}else{
if(section==0){
return;
}
perSize=actWidth/info.length;
}
for(var i=1;i<=info.length;i++){
if(isVerticial){
context.moveTo(xOrigin-5,yOrigin-perSize*i);
context.lineTo(xOrigin,yOrigin-perSize*i);
context.stroke();
context.fillText(info[i-1],xOrigin-20,yOrigin-perSize*i+4);
}else{
context.moveTo(xOrigin+perSize*i,yOrigin+5);
context.lineTo(xOrigin+perSize*i,yOrigin);
context.stroke();
var character=info[i-1];
var char='';
if(isNaN(character)){
var tmp=character.split("");
for(var j=0;j<tmp.length;j++){
context.fillText(tmp[j],xOrigin+perSize*i-5,yOrigin+10+(j+1)*13);
}
}else{
context.fillText(character,xOrigin+perSize*i-5,yOrigin+20);
}
context.fillStyle =color[i];
context.fillRect(xOrigin+perSize*i-perSize/4,yOrigin-actHeight*percent[i-1],perSize/2,actHeight*percent[i-1]-1);
context.fillStyle='black';
context.fillText(percent[i-1]*100+"%",xOrigin+perSize*i-perSize/8,yOrigin-actHeight*percent[i-1]);
}
}
};

/**
* 获取画布
*/
canvas.get2DContext=function(canvasNode){
return canvasNode.getContext("2d");
};


效果图如下：

        


下载：