首先,介绍下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>