<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Horizontal Columnar Voting statistics chart jquery code </title>
<script type= "text/web Effects" src= "Js/jquery.js" ></script>
<script>
/**
* Transverse Column chart
*
* @author aspect (Lrenwang)
* @email lrenwang@qq.com
* @qq 3142442
* @version 1.2
* Compatible IE7 Firefox
*/
var bar = function (id,title,data) {
ID of the display
This.id = ';
Title
This.title = ';
Data
This.data = ';
Wide
This.width = 500;
Background picture Position
this.bgimg = ' images/plan.gif ';
Animation speed
This.speed = 1000;
Total votes
var num_all = 0;
This.show = function () {
Add a Table Object
$ ("#" +this.id). Append ("<table width= '" +this.width+ "' cellpadding=0" cellspacing=6 border=0 style= ' font-size:12px; ') ></table> ")
$ ("#" +this.id+ "table"). Append ("<tr><td colspan=3 align= ' center ' ><span style= ' font:900 14px; color:# 444 ' > ' +this.title+ "</span></td></tr>")
Calculate Total
$ (this.data). each (function (i,n) {
Num_all + + parseint (n[1]);
})
var that = this;
Starting
var s_img = [0,-52,-104,-156,-208];
Center Point Start coordinate
var c_img = [ -312,-339,-367,-395,-420];
End
var e_img = [ -26,-78,-130,-182,-234];
var that = this;
var Div;
$ (this.data). each (function (i,n) {
Calculation ratio
var Bili = (n[1]*100/num_all). tofixed (2);
Calculate the length of the picture, *0.96 is to leave space before and after the picture
var img = parsefloat (bili) *0.96;
if (img>0)
{
div = "<div style= ' Width:3px;height:16px;background:url (" +that.bgimg+ ") 0px" +s_img[i]+ "px; float:left; ' ></div><div fag= ' "+img+" ' style= ' Width:0%;height:16px;background:url ("+that.bgimg+") 0 "+c_img[i]+" px repeat-x; float:left; ' ></div><div style= ' Width:3px;height:16px;background:url ("+that.bgimg+") 0px "+e_img[i]+" PX; float:left ;' ></div> ";
}
Else
{
Div= ';
}
$ ("#" +that.id+ "table"). Append ("<tr><td width= ' 30% ' align= ' right ' >" +n[0]+ ": </td><td width= ' 60 % ' bgcolor= ' #fffae2 ' > ' +div+ ' </td><td width= ' 10% ' nowrap > ' +n[1]+ ' ("+bili+"%) </td></tr> " )
})
This.play ();
}
This.play = function () {
var that = this;
$ ("#" +this.id+ "div"). each (function (i,n) {
if ($ (n). attr (' "))
{
$ (n). Animate ({width: $ (n). attr (' ") + '% '}, That.speed)
}
})
}
}
</script>
<body>
<div id= "Show" ></div>
<script>
var data = [];
data[0] = [' Education ', '];
data[1] = [' health ', '] ';
data[2] = [' tourist environment ', ' 22 '] ;
Data[3] = [' Food supervision ', ' 1 '];
Data[4] = [' Life insurance ', ' 0 '];
var title = ' Questionnaire ';
var bar1 = new Bar ();
Bar1.id = ' show ';
Bar1.title = title;
Bar1.data = data;
Bar1.show ();
</script>
</body>