jquery关于图形报表的运用实现代码


Posted in Javascript onJanuary 06, 2011

效果图

jquery关于图形报表的运用实现代码 

 

在线演示http://demo.3water.com/js/jquery_baobiao/index.html
打包下载 http://xiazai.3water.com/201101/yuanma/jquery_baobiao.rar
<script type="text/javascript"> 
$(function() { 
$("#tabs").tabs(); 
}); 
</script> <script type="text/javascript"> 
gvChartInit(); 
jQuery(document).ready(function() { 
jQuery('#myTable1').gvChart({ 
chartType: 'AreaChart', 
gvSettings: { 
vAxis: { title: '金额' }, 
hAxis: { title: '月份' }, 
width: 720, 
height: 300 
} 
}); 
jQuery('#myTable2').gvChart({ 
chartType: 'LineChart', 
gvSettings: { 
vAxis: { title: '金额' }, 
hAxis: { title: '月份' }, 
width: 720, 
height: 300 
} 
}); 
jQuery('#myTable3').gvChart({ 
chartType: 'BarChart', 
gvSettings: { 
vAxis: { title: '金额' }, 
hAxis: { title: '月份' }, 
width: 720, 
height: 300 
} 
}); 
jQuery('#myTable4').gvChart({ 
chartType: 'ColumnChart', 
gvSettings: { 
vAxis: { title: '金额' }, 
hAxis: { title: '月份' }, 
width: 720, 
height: 300 
} 
}); 
jQuery('#myTable5').gvChart({ 
chartType: 'PieChart', 
gvSettings: { 
vAxis: { title: '金额' }, 
hAxis: { title: '月份' }, 
width: 720, 
height: 300 
} 
}); 
}); 
</script>

CSS样式
<style type ="text/css" > 
body 
{ 
text-align: center; 
font-family: Arial, sans-serif; 
font-size: 12px; 
} 
a 
{ 
text-decoration: none; 
font-weight: bold; 
color: #555; 
} 
a:hover 
{ 
color: #000; 
} 
div.easyui-tabs 
{ 
margin: auto; 
text-align: left; 
width: 720px; 
} 
div.clean 
{ 
border: 1px solid #850000; 
} 
.clean td, .clean th 
{ 
border: 2px solid #bbb; 
background: #ddd; 
padding: 5px 10px; 
text-align: center; 
border-radius: 2px; 
} 
.clean table 
{ 
margin: auto; 
margin-top: 15px; 
margin-bottom: 15px; 
} 
.clean caption 
{ 
font-weight: bold; 
} 
.gvChart, .clean 
{ 
border: 2px solid #850000; 
border-radius: 5px; 
-moz-border-radius: 10px; 
width: 720px; 
margin: auto; 
margin-top: 20px; 
} 
pre 
{ 
background: #eee; 
padding: 10px; 
border-radius: 10px; 
-moz-border-radius: 10px; 
} 
</style>

Html
<div class="easyui-tabs" fit="true" plain="true" style="height:500px;width:800px;"> 
<div title="Title1" style="padding:10px;"> 
<h2 id="area"> 
区域报表</h2> 
<table id='myTable1'> 
<caption> 
报表分析</caption> 
<thead> 
<tr> 
<th> 
</th> 
<th> 
一月 
</th> 
<th> 
二月 
</th> 
<th> 
三月 
</th> 
<th> 
四月 
</th> 
<th> 
五月 
</th> 
<th> 
六月 
</th> 
<th> 
七月 
</th> 
<th> 
八月 
</th> 
<th> 
九月 
</th> 
<th> 
十月 
</th> 
<th> 
十一月 
</th> 
<th> 
十二月 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th> 
实际完成 
</th> 
<td> 
900 
</td> 
<td> 
600 
</td> 
<td> 
327 
</td> 
<td> 
359 
</td> 
<td> 
376 
</td> 
<td> 
398 
</td> 
<td> 
60</td> 
<td> 
50</td> 
<td> 
404</td> 
<td> 
700</td> 
<td> 
200</td> 
<td> 
500</td> 
</tr> 
<tr> 
<th> 
计划任务 
</th> 
<td> 
1167 
</td> 
<td> 
1110 
</td> 
<td> 
691 
</td> 
<td> 
165 
</td> 
<td> 
135 
</td> 
<td> 
157 
</td> 
<td> 
139 
</td> 
<td> 
136 
</td> 
<td> 
938 
</td> 
<td> 
1120 
</td> 
<td> 
55 
</td> 
<td> 
55 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div title="Title2" style="padding:10px;"> 
<h2 id="line"> 
LineChart</h2> 
<table id='myTable2'> 
<caption> 
报表分析</caption> 
<thead> 
<tr> 
<th> 
</th> 
<th> 
一月 
</th> 
<th> 
二月 
</th> 
<th> 
三月 
</th> 
<th> 
四月 
</th> 
<th> 
五月 
</th> 
<th> 
六月 
</th> 
<th> 
七月 
</th> 
<th> 
八月 
</th> 
<th> 
九月 
</th> 
<th> 
十月 
</th> 
<th> 
十一月 
</th> 
<th> 
十二月 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th> 
实际完成 
</th> 
<td> 
900 
</td> 
<td> 
600 
</td> 
<td> 
327 
</td> 
<td> 
359 
</td> 
<td> 
376 
</td> 
<td> 
398 
</td> 
<td> 
60</td> 
<td> 
50</td> 
<td> 
404</td> 
<td> 
700</td> 
<td> 
200</td> 
<td> 
500</td> 
</tr> 
<tr> 
<th> 
计划任务 
</th> 
<td> 
1167 
</td> 
<td> 
1110 
</td> 
<td> 
691 
</td> 
<td> 
165 
</td> 
<td> 
135 
</td> 
<td> 
157 
</td> 
<td> 
139 
</td> 
<td> 
136 
</td> 
<td> 
938 
</td> 
<td> 
1120 
</td> 
<td> 
55 
</td> 
<td> 
55 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div title="Title3" style="padding:10px;"> 
<h2 id="bar"> 
BarChart</h2> 
<table id='myTable3'> 
<caption> 
报表分析</caption> 
<thead> 
<tr> 
<th> 
</th> 
<th> 
一月 
</th> 
<th> 
二月 
</th> 
<th> 
三月 
</th> 
<th> 
四月 
</th> 
<th> 
五月 
</th> 
<th> 
六月 
</th> 
<th> 
七月 
</th> 
<th> 
八月 
</th> 
<th> 
九月 
</th> 
<th> 
十月 
</th> 
<th> 
十一月 
</th> 
<th> 
十二月 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th> 
实际完成 
</th> 
<td> 
900 
</td> 
<td> 
600 
</td> 
<td> 
327 
</td> 
<td> 
359 
</td> 
<td> 
376 
</td> 
<td> 
398 
</td> 
<td> 
60</td> 
<td> 
50</td> 
<td> 
404</td> 
<td> 
700</td> 
<td> 
200</td> 
<td> 
500</td> 
</tr> 
<tr> 
<th> 
计划任务 
</th> 
<td> 
1167 
</td> 
<td> 
1110 
</td> 
<td> 
691 
</td> 
<td> 
165 
</td> 
<td> 
135 
</td> 
<td> 
157 
</td> 
<td> 
139 
</td> 
<td> 
136 
</td> 
<td> 
938 
</td> 
<td> 
1120 
</td> 
<td> 
55 
</td> 
<td> 
55 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div title="Title4" style="padding:10px;"> 
<h2 id="column"> 
ColumnChart</h2> 
<table id='myTable4'> 
<caption> 
报表分析</caption> 
<thead> 
<tr> 
<th> 
</th> 
<th> 
一月 
</th> 
<th> 
二月 
</th> 
<th> 
三月 
</th> 
<th> 
四月 
</th> 
<th> 
五月 
</th> 
<th> 
六月 
</th> 
<th> 
七月 
</th> 
<th> 
八月 
</th> 
<th> 
九月 
</th> 
<th> 
十月 
</th> 
<th> 
十一月 
</th> 
<th> 
十二月 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th> 
实际完成 
</th> 
<td> 
900 
</td> 
<td> 
600 
</td> 
<td> 
327 
</td> 
<td> 
359 
</td> 
<td> 
376 
</td> 
<td> 
398 
</td> 
<td> 
60</td> 
<td> 
50</td> 
<td> 
404</td> 
<td> 
700</td> 
<td> 
200</td> 
<td> 
500</td> 
</tr> 
<tr> 
<th> 
计划任务 
</th> 
<td> 
1167 
</td> 
<td> 
1110 
</td> 
<td> 
691 
</td> 
<td> 
165 
</td> 
<td> 
135 
</td> 
<td> 
157 
</td> 
<td> 
139 
</td> 
<td> 
136 
</td> 
<td> 
938 
</td> 
<td> 
1120 
</td> 
<td> 
55 
</td> 
<td> 
55 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div title="Title5" style="padding:10px;"> 
<h2 id="pie"> 
PieChart</h2> 
<table id='myTable5'> 
<caption> 
报表分析</caption> 
<thead> 
<tr> 
<th> 
</th> 
<th> 
一月 
</th> 
<th> 
二月 
</th> 
<th> 
三月 
</th> 
<th> 
四月 
</th> 
<th> 
五月 
</th> 
<th> 
六月 
</th> 
<th> 
七月 
</th> 
<th> 
八月 
</th> 
<th> 
九月 
</th> 
<th> 
十月 
</th> 
<th> 
十一月 
</th> 
<th> 
十二月 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th> 
2010 
</th> 
<td> 
125 
</td> 
<td> 
185 
</td> 
<td> 
327 
</td> 
<td> 
359 
</td> 
<td> 
376 
</td> 
<td> 
398 
</td> 
<td> 
0 
</td> 
<td> 
0 
</td> 
<td> 
0 
</td> 
<td> 
0 
</td> 
<td> 
0 
</td> 
<td> 
0 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div>

加入样式和框架库
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="jquery.gvChart-1.0.1.min.js" type="text/javascript"></script> 
<link href="../Demo/js/themes/default/tabs.css" rel="stylesheet" type="text/css" /> 
<link href="../Demo/js/themes/icon.css" rel="stylesheet" type="text/css" /> 
<script src="../Demo/js/jquery.easyui.min.js" type="text/javascript"></script>

以后我会和大家分享更多的好的东西,谢谢大家的支持。
文中代码打包下载
Javascript 相关文章推荐
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
记一次vue跨域的解决
Oct 21 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
基于Jquery的简单图片切换效果
Jan 06 #Javascript
基于jquery的分页控件(C#)
Jan 06 #Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 #Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 #Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 #Javascript
ASP中Sub和Function的区别说明
Aug 30 #Javascript
TBCompressor js代码压缩
Jan 05 #Javascript
You might like
PHP添加MySQL数据记录代码
2008/06/07 PHP
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python看某个模块的版本方法
2018/10/16 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python命令 -u参数用法解析
2019/10/24 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python中SQLite如何使用
2020/05/27 Python
python中关于数据类型的学习笔记
2020/07/19 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
优秀员工自荐书
2013/12/19 职场文书
会计系毕业求职信
2014/08/07 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
毕业论文致谢信
2015/05/14 职场文书
超市店长竞聘书
2015/09/15 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
多表查询、事务、DCL
2021/04/05 MySQL
Python基础学习之奇异的GUI对话框
2021/05/27 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫