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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
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
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
几种tab切换详解
2017/02/03 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
深入浅出了解Node.js Streams
2019/05/27 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
党员公开承诺书内容
2014/05/20 职场文书
文秘自荐信
2014/06/28 职场文书
前台文员岗位职责
2015/02/04 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技