songylwq
- 浏览: 131779 次
- 性别:
- 来自: 济南
-
文章分类
最新评论
基于jquery框架、google chart tools图形报表gvChart的应用心得
首先，介绍下gvChart：gvChart是一个利用Google Chart Tools来创建交互式图表（Charts）的jQuery插件。可创建的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables做数据源来创建图表。
准备工作：引入JS
<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>
红色部分为google的chart tools框架的引用，必须要引用并在js方法中调用方法gvChartInit();才能正常使用，并且这么强大的报表功能只能在线使用，允许用户每天访问5W次，想要离线使用的话只能用其他的报表框架了，后面的博客中我会介绍一个还算不错的js图形报表框架google官方的详细api：Google Chart API 参考 中文版
效果图1.
在页面中方法：
jQuery('#myTable1').gvChart({
chartType: 'AreaChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
数据：<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>
效果2：
调用方法：
jQuery('#myTable2').gvChart({
chartType: 'LineChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
数据格式：
<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>
效果3：
方法调用：
jQuery('#myTable3').gvChart({
chartType: 'BarChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
数据格式：
<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>
效果4：
方法调用：
jQuery('#myTable5').gvChart({
chartType: 'PieChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
数据格式：
<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>2001</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>
</tbody>
</table>
示例全部代码：
<!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>
<title></title>
<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="js/themes/default/tabs.css" rel="stylesheet"
type="text/css" />
<link href="js/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
<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>
<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>
</head>
<body>
<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>
</body>
</html>
分享到：
发表评论
相关推荐
2. **兼容性**：jQuery支持多种浏览器，包括旧版本，这使得基于jQuery的图形报表具有广泛的兼容性。 3. **交互性**：jQuery提供了丰富的事件处理和动画效果，可以为报表添加动态交互功能，提升用户体验。 **二、...
OrgChart.js 是一款基于 jQuery 的高效、可定制化的组织结构图插件。它允许开发者轻松地在网页上展示层次分明的组织架构，如公司部门、团队成员关系或者任何具有层级关系的数据。这款工具的源代码可以在码云...
【SSH + jQuery 框架在餐饮Web App中的应用】 SSH (Struts + Spring + Hibernate) 是一个流行的Java Web开发框架，它结合了Struts的MVC（模型-视图-控制器）架构、Spring的依赖注入和事务管理，以及Hibernate的对象...
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
JQuery_Chart是一款基于jQuery库开发的图表插件，它为网页开发者提供了丰富的图表类型，包括线图、区域图、饼图和柱状图等，极大地简化了在Web页面上展示数据和统计信息的过程。这款插件易于使用，且功能强大，能够...
本文详细介绍了基于jQuery框架的Web前端开发设计方法，并分析了Web前端开发的重要性和挑战，以及基于jQuery框架的开发技术知识结构和Web前端开发流程。 在基于jQuery框架的Web前端开发设计方法中，视觉效果、用户...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织...JQuery插件orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js ...
基于jquery框架，采用jQuery formValidator表单验证插件。
**基于jQuery的网站框架详解** jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，尤其在处理网页中的DOM操作、事件处理、动画效果以及Ajax交互方面。jQuery的流行在于其易于学习和...
【前端项目-jquery-orgchart.zip】是一个前端开发的资源包，主要包含了一个基于jQuery的插件，用于构建分层组织结构图。这个插件能够帮助开发者高效地将HTML中的嵌套无序列表转换为视觉上清晰、易于理解的组织结构图...
### 基于SSH框架与jQuery技术的JavaWeb开发应用 #### 一、引言 在当前快速发展的互联网时代，Web应用程序的需求日益增加，而JavaWeb作为一种成熟的技术栈，在企业级应用开发中占据着重要的地位。为了提升开发效率...
总之，jQuery组织结构图表插件OrgChart是一个强大且灵活的工具，可以帮助开发者快速构建交互式、易于理解的组织结构图，适用于企业网站、人力资源系统等多种应用场景。通过深入理解和实践，开发者可以充分利用其功能...
基于SSH框架与jQuery技术的JavaWeb开发应用.pdf
### 浅析JQuery框架及其插件应用 #### 一、jQuery框架概述 JQuery，一个由美国程序员John Resig创建的JavaScript库，自诞生以来迅速成为全球开发者钟爱的工具之一。它以“写得少，做得多”（WRITELESS，DOMORE）的...
在图形报表领域，jQuery通常与其他图表库结合，如Highcharts、Chart.js或Google Charts等，以实现丰富的视觉效果。 在本实例中，可能使用了这些特性： 1. **DOM操作**：jQuery提供了选择器功能，如`$("#elementId...
在实际项目中，jQuery图形报表插件，尤其是Highcharts，可以广泛应用于商业智能、数据分析、网站统计等多个领域。它不仅提供了丰富的图表类型，而且支持高度自定义，满足了开发者和设计师的多样化需求。同时，由于...
"基于jQuery框架的页面前端特效的设计与实现" 本文通过对 jQuery 框架的概念和特点的阐述，对 jQuery 语法和选择器功能及事件响应机制的分析，以实现复选框、表格等页面前端特效为例，描述使用 jQuery 技术的简洁性...
AKjs是一款专为移动端设计的前端框架，它基于广泛使用的jQuery库，提供了丰富的功能和优化的性能，旨在简化移动Web开发。AKjs框架旨在提高开发效率，提供良好的用户体验，特别是在iOS和Android系统上的微站应用。 #...
《jQuery组织结构图表插件OrgChart深度解析与应用》 jQuery组织结构图表插件OrgChart是一款基于jQuery的高效、易用的图表展示工具，尤其适用于构建企业或项目的组织架构图。该插件以其灵活的配置选项和丰富的自定义...