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

时间 2019-12-04

标签基于 jquery 框架 google chart tools 图形报表 gvchart 应用心得栏目 JQuery 繁體版

原文原文链接

首先，介绍下gvChart：gvChart是一个利用Google Chart Tools来建立交互式图表（Charts）的jQuery插件。可建立的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables作数据源来建立图表。

准备工做：引入JSjavascript

<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.css

在页面中方法：html

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：java

调用方法：jquery

jQuery('#myTable2').gvChart({
             chartType: 'LineChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });

数据格式：api

<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：框架

方法调用：ui

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：google

方法调用：spa

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>