首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

以后我会和大家分享更多的好的东西，谢谢大家的支持。
文中代码打包下载

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
JavaScript控制台的更多功能
Apr 28 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
FS1016(1) YAESU(1) 根德5570(1) BCLer(1) 74HC4066(1) ICF-903L(1) YB-230(1) AN-LP1(1) 239军机(1) frg-100(1)
You might like
第六节--访问属性和方法
2006/11/16 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jQuery控制图片的hover效果（smartRollover.js）
2012/03/18 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
javascript引用赋值（地址传值）用法实例
2015/01/13 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
详解python中executemany和序列的使用方法
2017/08/12 Python
python版学生管理系统
2018/01/10 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
博士毕业生自我鉴定范文
2014/04/13 职场文书
毕业设计说明书
2014/05/07 职场文书
环保建议书600字
2014/05/14 职场文书
沈阳故宫导游词
2015/01/31 职场文书
公司晚会主持词
2019/04/17 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL