效果：

思路：前台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. rust 参考的资料 转

    http://blog.csdn.net/loveisasea/article/details/46292715 rust官方学习文档: 1.http://doc.rust-lang.org/book ...

  2. Matlab读取音频数据

    项目需要,读出识别的车牌,对着图片看看是否识别正确. 有了0到9和A到Z,32个省份的音频,但是如何用matlab读出来,老版本有wavread直接读出,然后waveplay读入的即可.但是现在的是a ...

  3. JIRA Service Desk 3.9.2 没有许可证

    https://my.atlassian.com/license/evaluation Server ID BFHT-0XFL-3NM8-3KRF SEN SEN-L10880225 License ...

  4. Java中设置classpath、path、JAVA_HOME的作用？

    1.classpath是用来找编译后的class文件的,操作系统或者编译器等会在这些目录下寻找对应的.class文件 2.path时用来找命令行执行文件的,操作系统或者其他软件会在这些目录下找对应的命 ...

  5. （转）IntelliJ IDEA下的使用git

    1.git简介 Git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  6. 一个tomcat中部署多个项目

    在各自的项目web.xml中添加 <context-param> <param-name>webAppRootKey</param-name> <param- ...

  7. jenkins+testNG

    1.项目的pom.xml要配置插件,同时指定testng.xml文件的位置.就被这个卡了好久 <properties> <maven-surefire-plugin.version& ...

  8. MP3中设置播放顺序的软件《闪存式MP3伴侣》

    给姥爷买了一个插卡音箱,里面拷贝了几百段评书,每一段评书都是一个mp3文件,虽然插卡音箱会自动一个文件一个文件自动播放,可是比较郁闷的是评书的播放顺序完全是乱的,毫无规律可寻,本来我的mp3文件的文件 ...

  9. 在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的？

    如何在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的? 解决方案:将整列单元格格式设为文本,然后,选中该列,数据--分列--完成 详细步骤: (1)选中1行或者1列,再单击 ...

  10. Firefly 性能测试 通报

    http://bbs.gameres.com/forum.php?mod=viewthread&tid=220516 Firefly 性能测试 主要考虑点 网络IO的并发 进程间通信压力 数据 ...