It provides you with a superb horizontal columnar voting statistics graph jQuery code for free, using the dynamic voting Effect of jquery plug-in instances.
It provides you with a superb horizontal columnar voting statistics graph jquery code for free, using the dynamic voting Effect of jquery plug-in instances.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "expires" content = "0">
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> jquery code for a horizontal columnar voting Statistical Chart </title>
<Script type = "text/Webpage effects" src = "js/jquery. js"> </script>
<Script>
/**
* Horizontal column chart
*
* @ Author (lrenwang)
* @ Email lrenwang@qq.com
* @ Qq 3142442
* @ Version 1.2
* Compatible with ie7 firefox
*/
Var bar = function (id, title, data ){
// Display id
This. id = '';
// Title
This. title = '';
// Data
This. data = '';
// Width
This. Length = 500;
// Specifies the position of the background image.
This. bgimg = 'images/plan.gif ';
// Animation speed
This. speed = 1000;
// Total number of 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 the total number
$ (This. data). each (function (I, n ){
Num_all + = parseint (n [1]);
})
Var that = this;
// Start
Var s_img = [0,-52,-104,-156,-208];
// Start coordinate of the Intermediate Point
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 ){
// Calculate the proportion
Var Billi = (n [1] * 100/num_all). tofixed (2 );
// Calculate the image length. * 0.96 is used to reserve space for the front and back images.
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 = '000000' align = 'right'>" + n [0] + ": </td> <td width = '000000' bgcolor = '# fffae2'> "+ div +" </td> <td width = '000000' nowrap> "+ n [1] + "(" + bili + "%) </td> </tr> ")
})
This. play ();
}
This. play = function (){
Var that = this;
$ ("#" + This. id + "div"). each (function (I, n ){
If ($ (n). attr ('fag '))
{
$ (N). animate ({width: $ (n). attr ('fag') + '%'}, that. speed)
}
})
}
}
</Script>
</Head>
<Body>
<Div id = "show"> </div>
<Script>
Var data = [];
Data [0] = ['education ', '30'];
Data [1] = ['healthcare ', '10'];
Data [2] = ['tourism environment', '22'];
Data [3] = ['Food authorization', '1'];
Data [4] = ['life Security ', '0'];
Var title = 'Survey questionnaire ';
Var bar1 = new bar ();
Bar1.id = 'show ';
Bar1.title = title;
Bar1.data = data;
Bar1.show ();
</Script>
</Body>
</Html>
Effect preview address
Http://g.111cn.cn/javascript/js/20100902/count/
Source code
Http://down.bKjia. c0m/down/code/jquery/2010/0902/20593.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
