jquery框架、google chart tools图形报表gvChart的应用 。
[javascript] view plaincopyprint?
<span style=”font-size:16px;”>首先,介绍下gvChart:<span style=”font-family: 宋体, Verdana, Tahoma, Arial, Helvetica, sans-serif; line-height: 20px; “>gvChart是一个利用Google Chart Tools来创建交互式图表(Charts)的jQuery插件。可创建的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables做数据源来创建图表。</span></span>
准备工作:引入JS
[javascript] view plaincopyprint?
<script type=”text/javascript” src=”<span style=”color:#ff0000;”>http://www.google.com/jsapi</span>”></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.
在页面中方法:
[javascript] view plaincopyprint?
<span style=”font-size:16px;”>jQuery(‘#myTable1′).gvChart({
chartType: ‘AreaChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
</span>
数据:
[html] view plaincopyprint?
<span style=”font-size:16px;”><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></span>
效果2:
调用方法:
[javascript] view plaincopyprint?
jQuery(‘#myTable2′).gvChart({
chartType: ‘LineChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
数据格式:
[html] view plaincopyprint?
<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:
方法调用:
[javascript] view plaincopyprint?
jQuery(‘#myTable3′).gvChart({
chartType: ‘BarChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
数据格式:
[html] view plaincopyprint?
<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:
方法调用:
[javascript] view plaincopyprint?
<span style=”font-size:16px;”>jQuery(‘#myTable5′).gvChart({
chartType: ‘PieChart’,
gvSettings: {
vAxis: { title: ‘金额’ },
hAxis: { title: ‘月份’ },
width: 720,
height: 300
}
});
</span>
数据格式:
[html] view plaincopyprint?
<span style=”font-size:16px;”><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></span>
示例全部代码:
[html] view plaincopyprint?
<span style=”font-size:16px;”><!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>
</span>