效果：

思路：前台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>

Demo下载：

http://files.cnblogs.com/files/xinchun/tongjitu.zip

点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  3. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  4. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  5. js jquery 选择器总结

    js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...

  6. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  7. spring访问静态资源出错，No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  8. js jquery中 的数据类型

    任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...

  9. paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

    paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----An ...

随机推荐

  1. Java 的BigDecimal

    原文:http://blog.csdn.net/diyu122222/article/details/76887382 decimal decimal(18,0) 18是定点精度,0是小数位数. de ...

  2. STSDB 一

    STSdb 4.0 是一个开源的NoSQL 数据库和虚拟文件系统,支持实时索引,完全用c#开发的. 引擎原理基于WaterfallTree(瀑布树)数据结构搭建 以下内容基于stsdb4.dll(4. ...

  3. 怎么设置IDEA，去除单词拼写检查，或者添加自定义的单词

    如图所示,添加自定义的单词,这样IDEA检查的时候,就不会报错了.估计默认是根据英文单词来释义的.

  4. C#动态调用webservice方法

    摘 自: http://www.hao5191.cn/a/chengxukaifa/c_/20130109/115819.html using System; using System.Collect ...

  5. 快速实现一个生产者-消费者模型demo

    package jesse.test1; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.Blo ...

  6. 【笔记】探索js 的this 对象 (第一部分)

    最近在看 你不知道的javascript 这本书,在第二部分看到了一个比较重要的知识点 那就是 this对象的全面认识,于是做一下笔记 博主本人在看这本书之前也一直以为 this 是指一切引用类型的本 ...

  7. vs2017 自定义生成规则 错误 MSB3721 命令 ”已退出，返回代码为 1。

    错误 MSB3721 命令 ”已退出,返回代码为 1. 解决办法:去掉yasm复选框,改为masm vs2017 自定义生成规则-编译汇编代码 VC++调用yasm编译汇编代码有三种方法:Custom ...

  8. HDU 1253 胜利大逃亡 NYOJ 523【BFS】

    胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  9. Windows最强ssh客户端推荐 —— Bitvise SSH Client

    原名Tunnelier,解除它是因为为了sshFQ,没想到它既有SSH Terminal,又集成SFTP,还能FQ,功能一应区全. 还支持pem证书,回想最初使用putty,还要把pem证书进行转换才 ...

  10. 算法笔记_086:蓝桥杯练习 9-2 文本加密（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 先编写函数EncryptChar,按照下述规则将给定的字符c转化(加密)为新的字符:"A"转化"B" ...