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模仿msgbox提示效果代码
Jun 10 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
koa源码中promise的解读
Nov 13 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
如何使用JavaScript实现栈与队列
Jun 24 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
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php遍历数组的方法分享
2012/03/22 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python中的index()方法使用教程
2015/05/18 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python 自动去除空行的实例
2018/07/24 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
Python 高效编程技巧分享
2020/09/10 Python
Python 操作 MySQL数据库
2020/09/18 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
企业宣传方案
2014/03/04 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Go gorilla/sessions库安装使用
2022/08/14 Golang