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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
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+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python快速排序算法实例分析
2017/11/29 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python for i in range ()用法详解
2020/09/18 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
师范生个人推荐信
2013/11/29 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
食品业务员岗位职责
2014/03/18 职场文书
项目合作协议书
2014/04/16 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
python小型的音频操作库mp3Play
2022/04/24 Python
Django框架中视图的用法
2022/06/10 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers