下图为jquery实现静态条形统计图，在选择题统计中用的比较多。

思路：前台JS实现动态数据效果，后台可以拼接字符串或者用JSON加载数据

代码：

青苹果条形统计

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());

});

});

});

jquery实现动态的条形统计图

代码如下：

页面布局如下:

*

{

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;

}

$(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 {};

}

}

运行效果图:

点击跳起来按钮效果:

以上内容是本文给大家分享的jquery实现动静态条形统计图，希望大家喜欢本文内容。