基于jquery框架、google chart tools图形报表gvChart的应用心得

现在的位置: 首页 > 综合 > 正文

基于jquery框架、google chart tools图形报表gvChart的应用心得

2013年08月05日 ⁄ 综合 ⁄ 共 8383字 ⁄ 字号小中大 ⁄ 评论关闭

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

【上篇】使用Struts2框架进行文件的上传与下载
【下篇】麻省理工的免费课程

作者: snort

该日志由 snort 于11年前发表在综合分类下，最后更新于 2013年08月05日.
转载请注明: 基于jquery框架、google chart tools图形报表gvChart的应用心得 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

基于jquery框架、google chart tools图形报表gvChart的应用心得

作者: snort

书签

最新文章New

本站推荐

返回首页