點滴積累【JS】---JQuery實現條形統計圖，適用于選擇題等統計

2024-04-27 15:00:35

字體：大中小

來源：轉載

供稿：網友

效果：

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