jquery实现动静态条形统计图


Posted in Javascript onAugust 17, 2015

下图为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实现动静态条形统计图

 点击跳起来按钮效果:

jquery实现动静态条形统计图

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

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JS实现的5级联动Select下拉选择框实例
Aug 17 #Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 #Javascript
关于js里的this关键字的理解
Aug 17 #Javascript
You might like
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
python 图片验证码代码
2008/12/07 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python实现批量修改文件名实例
2015/07/08 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
汉语专业应届生求职信
2013/10/01 职场文书
住房公积金接收函
2014/01/09 职场文书
婚假请假条怎么写
2014/04/10 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
初三英语教学计划
2015/01/23 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript