jquery实现动静态条形统计图

更新时间：2015年08月17日 12:08:00 作者：陈新春0

这篇文章主要介绍了jquery实现动静态条形统计图,需要的朋友可以参考下

下图为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="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:'先结婚',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 id="poll_a"></div>
<div id="poll_b"></div>
<div style="text-align:center;"><input type="button" id="getPollData1" value="获得第一个投票的值"/></div>
<div id="poll_c"></div>
<div style="text-align:center;"><input type="button" id="getPollData2" 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="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">
  这是一个段落标记</p>
 <input type="button" value="停下来" id="btn1" />
 <input type="button" value="跳起来" id="bnt2" />
 </div>
</body>
</html>

运行效果图:

点击跳起来按钮效果:

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

您可能感兴趣的文章:

JS设计模式之数据访问对象模式的实例讲解
下面小编就为大家带来一篇JS设计模式之数据访问对象模式的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
学做Bootstrap的第一个页面
这篇文章主要为大家介绍了学做Bootstrap的第一个页面，这是学bootstrap的第一个页面，还有许多需要改进的地方，希望大家批评指正
2016-05-05
js带点自动图片轮播幻灯片特效代码分享
这篇文章主要为大家详细介绍了js带点自动图片轮播幻灯片特效，图片轮播效果特别适合做产品展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-09-09
JavaScript通过极大极小值算法实现AI井字棋游戏
极小极大值搜索算法是一种零和算法，是用来最小化对手的利益，最大化自己的利益的算法。极小极大之搜索算法常用于棋类游戏等双方较量的游戏和程序，算是一种电脑AI算法。本文将介绍通过这个算法实现的一个井字棋游戏，需要的可以参考一下
2021-12-12
js 得到文件后缀(通过正则实现)
使用js获取文件的后缀，有个不错的正则，大家可以借用下，具体如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
如何在TypeScript 中实现接口的类
这篇文章主要介绍了TypeScript 中实现接口的类,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
js实现可键盘控制的简单抽奖程序
这篇文章主要为大家详细介绍了js实现可键盘控制的简单抽奖程序，代码简洁，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
理解Javascript的caller,callee,call,apply区别
理解Javascript的caller,callee,call,apply区别...
2007-03-03
一步快速解决微信小程序中textarea层级太高遮挡其他组件
这篇文章主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
js 点击按钮弹出另一页，选择值后，返回到当前页
js 点击按钮弹出另一页，选择值后，返回到当前页，其实主要用于cms系统中，相关文章的搜索，要在已上传目录中选择一些图片等。
2010-05-05