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实现动静态条形统计图，希望大家喜欢本文内容。

您可能感兴趣的文章:

微信小程序实现跑马灯效果
这篇文章主要为大家详细介绍了微信小程序实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
mui上拉加载功能实例详解
最近小编在做移动端的项目，用到了mui的上拉加载功能，今天小编给大家整理一下分享到脚本之家平台，需要的朋友参考下
2017-04-04
一些经常会用到的Javascript检测函数
一些经常会用到的Javascript检测函数，都是在prototype上面的扩展。
2010-05-05
javascript 字符 Escape,encodeURI,encodeURIComponent
下面是对字符串编码转换功能函数大家，大家可以根据实际需要选择使用。
2009-07-07
利用JavaScript构建树形图的方法详解
树形图可视化广泛用于分层数据分析。如果你没有经验还想创建一个，那将会有些复杂。下面是一个详细教程，教你如何使用JavaScript创建交互式树形图
2022-06-06
JavaScript双问号(??)操作符用法详解
在现代JavaScript开发中,处理变量默认值是一个常见但容易引发bug的操作,很多开发者可能都遇到过这样的问题：使用||设置默认值时,意外覆盖了0、''等合法值,这时候,ES2020引入的双问号操作符（??）就能完美解决这类问题,本文将带您全面掌握这个操作符的使用场景和高级技巧
2025-04-04
使用Math.max,Math.min获取数组中的最值实例
下面小编就为大家带来一篇使用Math.max,Math.min获取数组中的最值实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
使用Layui搭建后台管理界面的操作方法
今天小编就为大家分享一篇使用Layui搭建后台管理界面的操作方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
ES6 Array常用扩展的应用实例分析
这篇文章主要介绍了ES6 Array常用扩展的应用,结合实例形式分析各种常见扩展方法针对Array数组的转换、遍历、查找、运算等相关操作技巧,需要的朋友可以参考下
2019-06-06
javascript之卸载鼠标事件的代码
javascript之卸载鼠标事件的代码...
2007-05-05

jquery实现动静态条形统计图

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具