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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
IE与firefox之jquery用法区别
Oct 03 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
基于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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
解析PHP工厂模式的好处
2013/06/18 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php调用shell的方法
2014/11/05 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP7常量数组用法分析
2016/09/26 PHP
完美的php分页类
2017/10/24 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
详解python的数字类型变量与其方法
2016/11/20 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
自学python用什么系统好
2020/06/23 Python
Python之字典添加元素的几种方法
2020/09/30 Python
民主生活会对照检查材料范文
2014/10/01 职场文书
法人身份证明书
2014/10/08 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js