jQuery动态与静态条形统计图示例：选择题分析与代码实现

109 浏览量更新于2024-08-30 收藏 155KB PDF 举报

本文主要介绍了如何使用jQuery实现静态和动态条形统计图，特别在选择题统计中的应用。作者首先强调了前端JavaScript在动态数据展示中的关键作用，同时指出后台可以通过字符串拼接或JSON数据来提供数据支持。具体实现步骤如下： 1. **页面结构与引用**: - 页面使用ASP.NET语法编写，`<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tiao.aspx.cs" Inherits="qiantaoflash.tiao" %>`定义了页面的基本属性。 - 使用XHTML规范声明文档类型 `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` - 引入CSS样式表，如`<link href="css/jQuery.spider.poll.css" rel="stylesheet" type="text/css"/>`，以及jQuery和自定义JavaScript库，如`<script src="js/jquery-1.4.3.min.js"></script>` 和 `<script src="js/jQuery.spider.poll-min.js"></script>`。 2. **静态条形统计图示例**: - 前端代码示例展示了如何定义静态数据，如 `var data = {root: [{id: '10000', name: '先结婚', value: '50'},{id: '10002', name: '先事业', value: '50'}]}`，这里的数据包含条形图的ID、名称和值。这些数据可以在前端直接解析并渲染为图表。 3. **动态条形统计图的可能实现**: - 对于动态数据，作者提到可以使用类似 `var data1` 和 `var data2` 的JSON对象，它们分别代表不同类型的动态数据，比如种族分布（如人类联盟、兽人部落等）和学历与能力的关系。 - 使用jQuery的DOM操作和数据绑定技术，当文档加载完成时(`$(document).ready(function() { ... })`)，可以根据需要动态生成或更新条形图。 4. **总结**: - jQuery在这里作为前端脚本语言，通过其强大的DOM操作能力和丰富的插件生态系统，可以方便地实现各种交互式图表，包括静态条形图的展示和动态数据的处理。后台则负责提供数据，前台负责展示和响应用户的交互。本文主要介绍了如何结合jQuery和服务器端技术实现条形统计图，并强调了前后端数据交互在动态统计图展示中的重要作用。读者可以根据实际需求，调整和扩展这些代码片段，为自己的项目创建适合的条形统计图表。

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">

<title>青苹果条形统计</title>

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

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38690402

粉丝: 5
资源: 1007

jQuery动态与静态条形统计图示例：选择题分析与代码实现

CSS3柱形阶梯条形统计图代码.zip

JQuery生成静态柱状图实例IE6\7\8,FF兼容

jquery制作统计表

jQuery实现动画效果

bootstrap+jquery实现静态动漫页面

jquery实现动画效果实例

运用jQuery实现动态点赞

jquery js html 静态网页

jquery左右动画图菜单

html动画效果条形图

最新资源