JQ-gvChart饼状、折线统计图表

摘要
阿里云产品通用代金券,最高可达2000元

统计图表在网站也好,微信也好都很实用,能直观表示出数据,利于站长的分析和修改。

这段时间朋友的一个项目要搞统计功能,费了N个脑细胞在百度一下,结果大多答案都一样(那个搞文章的太不上心了),gvchart这个插件还挺不错的,生成的图表不仅仅好看,而且使用还很简单。

废话不多说了,想了解gvchart的可以下载回去研究吧,网上文档很少。。。

第一步:引入gvchart文件

jquery-1.10.2.min.js(不多说,这个都知道是什么)
jsapi.js
corechart.js
jquery.gvChart-1.0.1.min.js

第二步:数据

不管你是写死了还是动态生成的都行,格式一样就完事。

饼状图

<table id='todayin'>
		<caption>地区分布统计</caption>
		<thead>
			<tr>
				<th></th>
				<th>北京</th>
				<th>广州</th>
				<th>甘肃</th>
				<th>河南</th>
				<th>湖北</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>695</th>
				<td>100</td>
				<td>94</td>
				<td>132</td>
				<td>213</td>
				<td>156</td>
			</tr>
		</tbody>
	</table>  

折线图

<table id='oldday'>
		<caption>10天数据统计 2016-05-15 至 2016-05-24</caption>
		<thead>
			<tr>
				<th></th>
				<th>2016-05-15</th>
				<th>2016-05-16</th>
				<th>2016-05-17</th>
				<th>2016-05-18</th>
				<th>2016-05-19</th>
				<th>2016-05-20</th>
				<th>2016-05-21</th>
				<th>2016-05-22</th>
				<th>2016-05-23</th>
				<th>2016-05-24</th>
			</tr>
		</thead>
		<tbody>
			<!-----------第一条折线------------>
			<tr>
				<th>增加</th>
				<td>1</td>
				<td>3</td>
				<td>2</td>
				<td>0</td>
				<td>5</td>
				<td>6</td>
				<td>4</td>
				<td>8</td>
				<td>2</td>
				<td>5</td>
			</tr>
			<!-----------第二条折线------------>
			<tr>
				<th>删除</th>
				<td>2</td>
				<td>2</td>
				<td>0</td>
				<td>0</td>
				<td>4</td>
				<td>1</td>
				<td>3</td>
				<td>0</td>
				<td>1</td>
				<td>0</td>
			</tr>
		</tbody>
	</table>

第三步:生成统计图表

gvChartInit();
$(document).ready(function(){
	/*ID 饼状图*/
	$('#todayin').gvChart({
		chartType: 'PieChart',
		gvSettings: {
			width: 500,
			height: 350
		}
	});
	/*ID 折线图*/
	$('#oldday').gvChart({
		chartType: 'LineChart',
		gvSettings: {
			vAxis: {title: '数据数量/个'},
			hAxis: {title: '日期'},
			width: 1100,
			height: 350
		}
	});
});

三步完成,统计图表生成了,上图看效果

QQ截图20160531165240.pngQQ截图20160531165251.png

已附源代码,需要的拿走不谢

文件名称:gvchart统计图表

文件大小:173.26 KB

更新日期:2019-11-04 11:12:01

作者信息:网络游客

授权类型:免费

目前评论:1 条

  1. avatar 小小鸟 回复 4年前 (2016-08-18)

    找了好久,博主写的还是很清晰,一看就懂,赞一个真棒

发表评论

游客 表情 看不清楚?点图切换