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实现动静态条形统计图，希望大家喜欢本文内容。
相关推荐
-
PHP实现绘制3D扇形统计图及图片缩放实例
1.利用php gd库的函数绘制3D扇形统计图 <?php header("content-type","text/html;charset=utf-8"); /*扇形统计图*/ $image = imagecreatetruecolor(100, 100); /*创建画布*/ /*设置画布需要的颜色*/ $white = imagecolorallocate($image,0xff,0xff,0xff); $gray = imagecolorallocate
-
php+highchats生成动态统计图
复制代码 代码如下: series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { na
-
javascript实现动态统计图开发实例
本文实例讲述了javascript实现动态统计图的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 html代码: <div id="content"> <div class="legend"> <h1>汽车销量:</h1> <div class="skills"> <ul> <li class="jq">大众</
-
jQuery圆形统计图开发实例
本文实例讲述了jQuery圆形统计图开发的方法.分享给大家供大家参考.具体分析如下: 这里我们要给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便.效果图如下: 首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中. 复制代码 代码如下: <script src="js/jquery-1.10.2.min.js"></script
-
asp.net中调用Office来制作3D统计图的实例代码
1.首先下载owc11 COM组件 http://www.microsoft.com/downloads/details.aspx?FamilyID=7287252c-402e-4f72-97a5-e0fd290d4b76&displaylang=en 2.注册owc11 在工程中添加 C:/Program Files/Common Files/Microsoft Shared/Web Components/11 文件下的owc11.dll引用 3.在工程中添加 using OWC11; 4.
-
javascript实现的柱状统计图表
工作需要,用javascript做一个统计图表: 完成后,做个笔记,大家分享一下,互相学习.其中还有点问题,还不是很完善. 其中参考了百度空间,中管理中心,访问统计,的js统计图表.但是应用上还是有差别,因为我做的这个项目中,需要时实的绘制新的统计表格,当有数据变化的时候,就会调用绘制表格的方法.所以要考虑页面性能的问题. 下面是完成后的预览图,可以看到,绘制一个表格,耗时0.005毫秒,也就是200分之一秒.效率我还是比较满意的! 目前在firefox,chrome,IE8,正常没问题,IE6
-
Highcharts 非常实用的Javascript统计图demo示例
Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcharts.com/demo/ Highcharts 官网文档:http://www.highcharts.com/documentation/how-to-use 官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可. 下面是一个学生成绩走势demo: 复制代码 代码如下: <!DOCTYPE HTML> <htm
-
PHP中使用GD库绘制折线图 折线统计图的绘制方法
在PHP中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库.除了安装GD库之外,在PHP中还可能需要其他的库,这可以根据需要支持哪些图像格式而定.GD库可以在http://www.boutell.com/gd/免费下载,不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF.JPEG.PNG.WBMP.XBM等格式的图像文件,此外还支持一些如FreeType.Type 1等字体库.通过GD库中的函数可以完成各种点.线.几何图形.文本及颜色的
-
jquery实现动静态条形统计图
下图为jquery实现静态条形统计图,在选择题统计中用的比较多. 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tiao.aspx.cs" Inherits="qiantaoflash.tiao" %> <!DOCTYPE html PUBLIC "
-
Nginx与Tomcat实现动静态分离和负载均衡
本文介绍了Nginx与Tomcat实现动静态分离和负载均衡,所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件,从而达到动静页面访问时通过不同的容器来处理. 一．Nginx简介: Nginx一个高性能的HTTP和反向代理服务器, 具有很高的稳定性和支持热部署.模块扩展也很容易.当遇到访问的峰值,或者有人恶意发起慢速连接时,也很可能会导致服务器物理内存耗尽频繁交换,失去响应,只能重启服务器,N
-
jquery缓动swing liner控制动画过程不同时刻的速度
jQuery效果函数(slideUp().fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数,这就是缓动(easing),它确定了动画过程不同时刻的速度.例如,将一个元素移过页面的时候,可能让这个元素缓慢地开始移动,然后变得很快,最后随着动画的完成再次慢下来.给动画添加缓动,使得动画在视觉上更有趣且更有动态感. jQuery只包含了两个缓动方法:swing和linear.linear方法提供了一个稳定的动画,以使得动画的每个步骤都是相同的(例如,如果要让一个
-
jQuery插件实现静态HTML验证码校验
jQuery由美国人John Resig创建,它是一个快速.简洁的JavaScript库,提供了很多遍历函数,如each(fn).jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可.正是这些操作上的特点,用户可以方便地处理HTML文档.事件.实现动画效果,并且方便地为网站提供交互.如今,jQuery已经吸引了来自世界各地的众多JavaScript高手加入. 这里所要讲到的jQuery Real Person Pl
-
浅谈JS获取元素的N种方法及其动静态讨论
实际前端开发工作中,我们经常会遇到要获取某些元素,以达到更新该元素的样式.内容等目的.而文档对象模型 (DOM) 是HTML和XML文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合,它会将web页面和脚本或程序语言连接起来.也因此,JavaScript可以通过DOM API获取元素节点,方法有如下几种:其中querySelector()和quer
-
Spring Boot 静态资源处理方式
Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. 建议大家使用Spring Boot的默认配置方式,如果需要特殊处理的再通过配置进行修改. 如果想要自己完全控制WebMVC,就需要在@Configuration注解的配置类上增加@EnableWebMvc(@SpringBootApplication 注解的程序入口类已经包含@Configuration),增加该注解以后WebMvcAutoConfiguration中配
-
读jQuery之六 缓存数据功能介绍
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 复制代码 代码如下: <div data="some data">Test</div> <script> div.getAttribute('data'); // some data </script> 给页面中div添加了自定义属性"data"及值"some data".后续JS代码中使用getAttribute获取. jQuer
-
使用Python的Django框架结合jQuery实现AJAX购物车页面
Django中集成jquery 首先,静态的资源通常放入static文件夹中: static/ css/ djquery.css samples/ hello.css js/ jquery-1.7.1.min.js samples/ hello.js 其中css和js都按照应用名称(这里是samples)划分文件夹,如果文件较多,还可以再划分子文件夹. Django通常使用模板来展现html,而且我们通常使用继承的模板,所以需要将共用的元素,比如全局的css,对jquery.js的引入等,写到b
-
从零开始学习jQuery (八) 插播:jQuery实施方案
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章属于临时插播, 用于介绍我在本公司的jQuery实施方案. 二.前言 有了前几章扎实的基础知识我们已经可以在项目中投入使用jQuery了.再继续深入学习jQuery前插播一下我的jQuery实施方案. 每个公司的情况都不同.比如我们公司的页面文件都为用户控件, 物理路径和虚拟路径没有绝对的关系, 所以无法使用相对路径(否则生产环境中会找
-
jquery的总体架构分析及实现示例详解
jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架.jQuery的总体架构可以分为:入口模块.底层模块和功能模块.这里,我们以jquery-1.7.1为例进行分析. jquery的总体架构 复制代码 代码如下: 16 (function( window, undefined ) { // 构造 jQuery 对象 22 var jQuery = (function() { 25 var jQuery = functio