下图为jquery实现静态条形统计图，在选择题统计中用的比较多。
思路：前台JS实现动态数据效果，后台可以拼接字符串或者用JSON加载数据
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tiao.aspx.cs" Inherits="qiantaoflash.tiao" %> <!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 runat="server"> <title>青苹果条形统计</title> <link href="https://www.jb51.net/css/jQuery.spider.poll.css" type="text/css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jQuery.spider.poll-min.js"></script> <script type="text/javascript"> var data="{root:[{id:'10000',name:'先结婚',value:'50'},{id:'10002',name:'先事业',value:'50'}]}"; var data1="{root:[{id:'10000',name:'人类联盟',value:'60'},{id:'10001',name:'兽人部落',value:'25'},{id:'10003',name:'不死亡灵',value:'15'},{id:'10004',name:'暗夜精灵',value:'10'}]}"; var data2="{root:[{id:'10000',name:'学历',value:'0'},{id:'10001',name:'能力',value:'100'}]}"; $(document).ready(function (){ $("#poll_a").poll("poll1",{ title:'先结婚还是先事业', width:'600px', data:data }); $("#poll_b").poll("poll2",{ title:'青苹果魔兽争霸各个种族实力？', titleColor:'red', width:'600px', data:data1, showPoll:true, multiple:true }); $("#poll_c").poll("poll3",{ title:'学历重要还是能力重要', titleColor:'blue', width:'600px', data:data2, multiple:false }); $("#getPollData1").click(function (){ $("#poll_b").getChecked().each(function (i,n){ alert($(n).val()); }); }); $("#getPollData2").click(function (){ $("#poll_c").getChecked().each(function (i,n){ alert($(n).val()); }); }); }); </script> </head> <body> <div></div> <div></div> <div><input type="button" value="获得第一个投票的值"/></div> <div></div> <div><input type="button" value="获得第二个投票的值"/></div> </body> </html>
jquery实现动态的条形统计图
代码如下：
页面布局如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> * { margin: 0 0 0 0; padding: 0 0 0 0; } .container { width: 300; height: 300; margin: 50 0 0 50; border: 1px solid green; float: left; background-image: url('/images/mubk.jpg'); } .control { width: 280; height: 80; float: left; margin: 50 0 0 10; border: 1 solid #000000; } .item { height: 98%; width: 30px; border: 1 sollid green; background-color: #191970; display: inline-block; display: inline; margin-left: 10px; margin-top: 10px; text-align: center; } </style> <script src="https://www.jb51.net/Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var timer1; $("#slide>div:odd").css({ 'background-color': '#308014' }); $("#slide>div:even").css({ 'background-color': '#4169e1' }); $("#bnt2").click(function () { timer1 = setInterval(initDance, 500); }); $("#btn1").click(function () { timer1 && clearInterval(timer1); }); }); function initDance() { var height = parseInt(280 * Math.random()) + 5; var box = parseInt(7 * Math.random()); dance(box, height); } function dance(box, height) { if (height) { $(".item").eq(box).css({ height: height }); var obj = {}; obj["box"] = box; obj["height"] = height; return obj; } else { return {}; } } </script> </head> <body> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> </div> </div> <div> <p> 这是一个段落标记</p> <input type="button" value="停下来" /> <input type="button" value="跳起来" /> </div> </body> </html>
运行效果图:
点击跳起来按钮效果:
