js html 数据动态统计图,jquery实现动静态条形统计图
下图为jquery实现静态条形统计图,在选择题统计中用的比较多。
思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据
代码:
青苹果条形统计
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());
});
});
});
jquery实现动态的条形统计图
代码如下:
页面布局如下:
*
{
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;
}
$(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 {};
}
}
1
2
3
4
5
6
7
这是一个段落标记
运行效果图:
点击跳起来按钮效果:
以上内容是本文给大家分享的jquery实现动静态条形统计图,希望大家喜欢本文内容。
js html 数据动态统计图,jquery实现动静态条形统计图相关推荐
- python是静态语言还是动态语言_Python笔记--动/静态语言部分区别
在学python之前一直把动态语言和静态语言的区别理解为要写int char这样的预定义类型的就是静态语言,而可以不用事先声明数据类型的则是动态语言,直到看到了这个: python是动态语言,实例创建 ...
- 【Linux篇】第十一篇——动静态库(动静态库的介绍+动静态库的打包与使用)
动静态库的基本原理 认识动静态库 动静态库的概念 静态库的打包与使用 静态库的打包 静态库的使用 动态库的打包与使用 动态库的打包 动态库的使用 动静态库的基本原理 动静态库的本质就是可执行程序的&q ...
- ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签 发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
- 【JS 逆向百例】某空气质量监测平台无限 debugger 以及数据动态加密分析
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 文章目录 声明 逆向目标 写在前面 绕过无限 debugger 方法一 方法二 方法三 抓包分析 加密入口 动态 JS 本地改写 ...
- MVC中 数据底层联合JQUERY实现动态的安全的验证机制
实体的验证分部类定义如下 前台controller里进行数据有效性的验证,成功就进行数据处理,不成功就返回错误 前台页面配合JQuery强大的验证功能,实现动态验证 MVC集成表单验证输出单元,显示验 ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- Layui框架下:JS中根据后台查询到的数据动态往div中ul里面动态添加li
Layui框架下:JS中根据后台查询到的数据动态往div中ul里面动态添加li 先建立好一个div和ul JS代码: $(function () { layui.admin.req({ url: _s ...
- layerui js获取数据表格中的动态内容on失效live失效
layerui js获取数据表格中的动态内容on失效live失效.由于jquery1.9版本之后不再使用live,所以改成on,但直接使用on以layer中又不起作用.于是用下面的语句. $(docu ...
- 【JS 逆向百例】某空气质量监测平台无限 debugger 以及数据动态加密
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 文章目录 声明 逆向目标 写在前面 绕过无限 debugger 方法一 方法二 方法三 抓包分析 加密入口 动态 JS 本地改写 ...
最新文章
- (调用系统电话薄)运行时权限的基本使用
- 【数据仓库】Hive环境搭建和基础用法
- 医疗卫生信息化 医学信息 医院管理 医疗信息化 资源下载
- DataProtection设置问题引起不同ASP.NET Core站点无法共享用户验证Cookie
- DataTables怎么给某一列加上click事件
- 云图说|云上应用监控神器——应用性能监控APM2.0
- 太阳能灯_【产品中心】太阳能野营灯
- python找字符串中特殊字符_python – 在字符串中查找特殊符号
- 20145206《Java程序设计》实验五Java网络编程及安全
- 禁用生成8.3字符长文件名解决单目录存储大量文件写入性能下降问题
- hp440g5拆机_HP 惠普 ProBook 440 G5 评测 | ZMMOO
- 无稽之谈--关于我自己的程序世界
- C++期末课程设计——宾馆客房管理系统(详细报告+源代码+详细注释)(另附加“25+”C++C语言期末课程设计系统下载地址)
- diy一个android手机版下载,家居3D设计DIY
- 基于jdk8 LocalDate系列API的全新实用时间工具类
- Tushare库之获取股票列表接口
- 关于华为HS8145V 进入华为界面后 再刷回电信界面
- SOCKET与 线程 完成聊天室 非阻塞
- 毫无疑问计算机犯罪是一个很严重的问题英语,英语四级作文高分句型
- 计算机网络管理员技师简答题,计算机网络管理员技师复习资料.doc
热门文章
- 新能源二手车和燃油二手车如何选择
- SourceTree 提交报错 闪退
- html js 循环取json数据,JS循环遍历JSON数据的方法
- python逆序输出字符串_python实现对指定输入的字符串逆序输出的方法
- 3DMAX和MAYA,到底有什么区别?
- 超越视网膜屏的“刀锋”电脑,三星推出WQHD分辨率9系列超级本
- 柴油发电机的运作方式
- mcm智拼图_申请英国G5不可或缺的“拼图”——2021年上半年高含金量国际竞赛汇总...
- 用TRUE和FALSE函数返回逻辑值
- 办公计算机杂淡讲座主持词,“当前宏观经济金融形势与政策解析”讲座主持词...