柱状图js封装插件

Js柱状图插件

1.概述

   今天给大家分享一个自己封装的柱状图简单的一个插件，功能比较简单，但是还是比较实用的。

2.效果图如下：

 

3.主要功能

这个插件可以更多让用户来设置这个柱状图，比如用户传过来一个对象数组就可以设置柱状图里所表达的信息，柱状图的颜色，每个柱子的宽度，每个柱子的间隔，还有左边标杆的最大高度等都是可以让用户自己来设置，并且可以按照用户所传div大小按比例缩放柱状图的大小。

4.实现方式

我先在这里自己写了一个div来模拟用户所传的div，定义一个对象数组来模拟用户所传的对象数组信息，然后往封装函数里面传值，利用js语言来实现柱状图。代码如下所示：

<div class="div" id="div" style="width: 800px;height: 500px;">

</div>

<script src="js/Tree.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

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

var obj1={

label:"2012",

value:"79"

};

var obj2={

label:"2013",

value:"150"

};

var obj3={

label:"2014",

value:"100"

};

var obj4={

label:"2015",

value:"56"

};

var obj5={

label:"2016",

value:"86"

};

var obj6={

label:"2017",

value:"110"

};

var array=[obj1,obj2,obj3,obj4,obj5,obj6];

//用户传值  数组信息   div的id  100%时的数值是多少  100%时的像素是多少  柱子的颜色 柱子的宽度

//柱子之间的距离

initTree(array,div,200,300,"yellow","30px","70px");

</script>

用户已经向封装函数传值，接下来就是利用用户所传的信息来用js语言实现柱状图了，首先根据用户所传的div的宽度按比例计算柱状图的左边距，定义一个存储柱状图高度的数组，设置用户所传的div为相对定位。代码如下：

var left=parseFloat(bigdiv.style.width)/5;

var height=[];

bigdiv.style.position="relative";

根据用户所传的对象数组的长度依次添加每个柱子，为每个柱子创建一个div新节点，然后对这个节点根据用户的要求设置样式，根据div高度按比例计算柱状图的下边距，每个柱子的初始高度设置为0px，根据用户的要求按百分比计算每个柱子的高度并存入height[]数组里面，作为设置动画来用。给柱子设置阴影，增加立体效果。定义用户所传的信息在柱状图里面的位置，最后将设置好的柱子节点添加到用户所传的div中。代码如下：

for(var i=0;i<array.length;i++){

var d=document.createElement("div");

d.style.position="absolute";

d.style.left=left+"px";

d.style.bottom=parseFloat(bigdiv.style.height)/10+"px";

d.style.width=wid;

d.style.height="0px";

height.push((array[i].value/topValue)*total);

d.style.backgroundColor=color;

d.style.borderStyle="outset";

d.style.borderRadius="20px";

d.style.boxShadow="10px 5px 10px";

//d.style.float="left";

d.style.webkitTransition="all 1.5s";

var value=document.createElement("span");

value.style.position="absolute";

value.style.marginTop="-20px";

var index=i;

value.innerHTML=array[i].value;

var label=document.createElement("span");

label.innerText=array[i].label;

label.style.position="absolute";

label.style.bottom="-20px";

left+=parseFloat(l);

d.appendChild(value);

d.appendChild(label);

bigdiv.appendChild(d);

}

然后再利用延时函数（稍微一点延时就可以）向每个柱子设置最终的高度，实现动画效果。代码如下：

setTimeout(function(){

for(var i=0;i<array.length;i++){

var ds=bigdiv.children;

ds[i].style.height=height[i]+"px";

}

},50);

最后，再按照用户所传div的比例，以及用户定义的100%时的值，来设置纵坐标，创建一个div节点来存放纵坐标，设置其样式，添加到用户所传的div中。代码如下：

var y=document.createElement("div");

y.style.position="absolute";

y.style.borderRight="2px solid black";

y.style.width=parseFloat(bigdiv.style.width)/80*9+"px";

y.style.left=parseFloat(y.style.width)/3+"px";

y.style.height=parseFloat(bigdiv.style.height)/5*3+"px";

y.style.bottom=parseFloat(bigdiv.style.height)/10+"px";

for(i=0;i<=topValue;i++){

if(i%(topValue/4)==0){

var node=document.createElement("span");

node.innerText=i;

node.style.bottom=i/topValue*total+"px";

node.style.position="absolute";

node.style.left=parseFloat(y.style.width)/9*5+"px";

y.appendChild(node);

}

}

bigdiv.appendChild(y);

现在js书写的柱状图插件基本封装完毕，我知道还有很多不完善的地方，比如标题，其实这也非常简单，欢迎朋友们留言评论进行指正，完善这些功能。今天的分享就到这里，以后还会有更多的分享给大家。