jQuery统计图表插件gvChart 0.1版_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java

gvChart - jQuery plugin demo

Below you can see example of the table with data about number of a new players on the page on every month. I have created two data sets, each for one year: 2009 and 2010. They can be shown as a separate datas on the chart (see below).

Game players count
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2010 125 185 327 359 376 398 0 0 0 0 0 0
2009 1167 1110 691 165 135 157 139 136 938 1120 55 55

General use

To use this plugin you have to put script tags reffering to jQuery, gvChart and Google jsapi.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-0.1.min.js"></script>

Important! Google jsapi script tag must be placed before gvChart script.

Before using script you have to initialize Google Api, by using gvChartInit() function. This function may not work when placed in the external JavaScript file. It is better idea to place it inline in the head.

<script type="text/javascript">
	gvChartInit();
</script>

Now you can use gvChart in your scripts. Below is a basic example of usage.

jQuery('#myTable').gvChart({
	chartType: 'ColumnChart',
	gvSettings: {
		vAxis: {title: 'No of players'},
		hAxis: {title: 'Month'},
		width: 720,
		height: 300,
		}
});

Settings

chartType

You can use five different google charts, by setting chartType to one of:

hideTable

Default: true If set to false, it won't hide table while creating the chart.

gvSettings

In the gvSettings variable you can place Google Charts settings, which you can find in the Google Visualization API Gallery.

AreaChart

Game players count
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2010 125 185 327 359 376 398 0 0 0 0 0 0
2009 1167 1110 691 165 135 157 139 136 938 1120 55 55

LineChart

Game players count
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2010 125 185 327 359 376 398 0 0 0 0 0 0
2009 1167 1110 691 165 135 157 139 136 938 1120 55 55

BarChart

Game players count
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2010 125 185 327 359 376 398 0 0 0 0 0 0
2009 1167 1110 691 165 135 157 139 136 938 1120 55 55

ColumnChart

Game players count
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2010 125 185 327 359 376 398 0 0 0 0 0 0
2009 1167 1110 691 165 135 157 139 136 938 1120 55 55

PieChart

Note that PieChart uses only first table row as a data set. Next data rows are ignored.

Game players count
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2010 125 185 327 359 376 398 0 0 0 0 0 0

代码整理:时代Java(NowJava.com) 

转载请注明出处,此代码仅供学习交流,请勿用于商业用途。

下载代码说明
X关闭

jQuery统计图表插件gvChart 0.1版(可生成折线图/饼形图/柱状图等)

gvChart是Google提供的一个用来生成统计报表的jquery插件,可以生成折线图,饼形图,柱状图等各种统计图,使用简单,经测试效果还不错。gvchart创建统计图标分为四步: 1、创建一个HTML数据表格 详细范例数据请下载范例查看。 2、添加相应的JS库的引用: [code] <script type="text/javascript" src="/