快捷導(dǎo)航

jquery實(shí)現(xiàn)動(dòng)靜態(tài)條形統(tǒng)計(jì)圖

更新時(shí)間：2015年08月17日 12:08:00 作者：陳新春0

這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)靜態(tài)條形統(tǒng)計(jì)圖,需要的朋友可以參考下

下圖為jquery實(shí)現(xiàn)靜態(tài)條形統(tǒng)計(jì)圖，在選擇題統(tǒng)計(jì)中用的比較多。

思路：前臺(tái)JS實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)效果，后臺(tái)可以拼接字符串或者用JSON加載數(shù)據(jù)

代碼：

<%@ 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>青蘋(píng)果條形統(tǒng)計(jì)</title>
 <link href="css/jQuery.spider.poll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jQuery.spider.poll-min.js"></script>

<script type="text/javascript">
var data="{root:[{id:'10000',name:'先結(jié)婚',value:'50'},{id:'10002',name:'先事業(yè)',value:'50'}]}"; 
var data1="{root:[{id:'10000',name:'人類(lèi)聯(lián)盟',value:'60'},{id:'10001',name:'獸人部落',value:'25'},{id:'10003',name:'不死亡靈',value:'15'},{id:'10004',name:'暗夜精靈',value:'10'}]}"; 
var data2="{root:[{id:'10000',name:'學(xué)歷',value:'0'},{id:'10001',name:'能力',value:'100'}]}"; 

$(document).ready(function (){
 $("#poll_a").poll("poll1",{
 title:'先結(jié)婚還是先事業(yè)',
 width:'600px',
 data:data
 });
 
 $("#poll_b").poll("poll2",{
 title:'青蘋(píng)果魔獸爭(zhēng)霸各個(gè)種族實(shí)力？',
 titleColor:'red',
 width:'600px',
 data:data1,
 showPoll:true,
 multiple:true
 });
 
 $("#poll_c").poll("poll3",{
 title:'學(xué)歷重要還是能力重要',
 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 id="poll_a"></div>
<div id="poll_b"></div>
<div style="text-align:center;"><input type="button" id="getPollData1" value="獲得第一個(gè)投票的值"/></div>
<div id="poll_c"></div>
<div style="text-align:center;"><input type="button" id="getPollData2" value="獲得第二個(gè)投票的值"/></div>
</body>
</html>

jquery實(shí)現(xiàn)動(dòng)態(tài)的條形統(tǒng)計(jì)圖

代碼如下：

頁(yè)面布局如下:

<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="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 id="slide" class="container">
 <div class="item">
  1
 </div>
 <div class="item">
  2
 </div>
 <div class="item">
  3
 </div>
 <div class="item">
  4
 </div>
 <div class="item">
  5
 </div>
 <div class="item">
  6
 </div>
 <div class="item">
  7
 </div>
 <div class="item" style="width: 1; border: 0; background-color: White">
 </div>
 </div>
 <div class="control">
 <p style="display: none; position: relative">
  這是一個(gè)段落標(biāo)記</p>
 <input type="button" value="停下來(lái)" id="btn1" />
 <input type="button" value="跳起來(lái)" id="bnt2" />
 </div>
</body>
</html>

運(yùn)行效果圖: