亚洲天堂男人在线,华人91视频,成人亚洲网站

一柱狀圖

(1) 豎狀單行條形直方圖效果圖：

asp.net中一款極為簡(jiǎn)單實(shí)用的圖表插件(jquery)

以上數(shù)據(jù)取自某個(gè)網(wǎng)站六個(gè)月份的用戶注冊(cè)量。從以上數(shù)據(jù)可以看出，一二月份注冊(cè)用戶數(shù)為0，圖表能夠清晰對(duì)比每個(gè)月份用戶注冊(cè)量的變化。

復(fù)制代碼代碼如下:

	
	//月度報(bào)表 

	function MonthReport() { 

	$.ajax({ 

	url: "/Home/About", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	axis_labels: ["一月", "二月", "三月", "四月", "五月", "六月"], 

	legend: ["serie1", "serie2", "serie3", "serie4", "serie5", "serie6"], 

	title: "情緣圖表", 

	size: "400x200" 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myDIV"); 

	} 

	}); 

	}

(2) 豎狀多行條形直方圖效果圖：
以上數(shù)據(jù)和第一種情況差不多，這是這里是做的季度統(tǒng)計(jì)，這里做了第一季度和第二季度的相關(guān)數(shù)據(jù)統(tǒng)計(jì)。顯示結(jié)果如圖

復(fù)制代碼代碼如下:

	
	//季度報(bào)表 

	function QuarterReport() { 

	$.ajax({ 

	url: "/Home/GetTotalCount", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	axis_labels: ["一季度", "二季度"], 

	legend: ["serie1", "serie2", "serie3"], 

	title: "情緣圖表", 

	size: "400x200" 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarter"); 

	} 

	}); 

	}

(3) 橫條多行條形直方圖效果圖：

asp.net中一款極為簡(jiǎn)單實(shí)用的圖表插件(jquery)

這種情況是上面一種情況的變相顯示，只不過橫縱坐標(biāo)修改了。

復(fù)制代碼代碼如下:

	
	//季度報(bào)表 

	function QuarterReportBhg() { 

	$.ajax({ 

	url: "/Home/GetTotalCount", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	axis_labels: ["一季度", "二季度"], 

	legend: ["serie1", "serie2", "serie3"], 

	title: "情緣圖表", 

	size: "400x200", 

	type: "bhg" 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarterbhg"); 

	} 

	}); 

	}

二堆棧圖

asp.net中一款極為簡(jiǎn)單實(shí)用的圖表插件(jquery)

堆棧圖多用于顯示數(shù)據(jù)變化程度，此處顯示了各科分?jǐn)?shù)的情況，似乎不是太直觀。但是這里能夠顯示此種效果就夠了

復(fù)制代碼代碼如下:

	
	//分?jǐn)?shù)統(tǒng)計(jì) 

	function ScoreReport(){ 

	$.ajax({ 

	url: "/Home/GetScore", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	axis_labels: ["賀臣", "情緣", "木木"], 

	legend: ["語(yǔ)文", "數(shù)學(xué)", "英語(yǔ)","綜合"], 

	title: "情緣圖表", 

	size: "400x200", 

	type: "bhs" 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myScoreReport"); 

	} 

	}); 

	}

三折線圖

asp.net中一款極為簡(jiǎn)單實(shí)用的圖表插件(jquery)

折線圖很適合地域分布，溫度分布圖。

復(fù)制代碼代碼如下:

	
	//溫度走勢(shì)圖 

	function TemperatureReport(){ 

	$.ajax({ 

	url: "/Home/GetTemperature", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	title: "情緣圖表", 

	axis_labels: ["一月", "二月", "三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], 

	size: "400x200", 

	type: "lc", 

	bar_width:"5", 

	bar_spacing:"5", 

	fillarea:true 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myTemperature"); 

	} 

	}); 

	}

四餅圖

asp.net中一款極為簡(jiǎn)單實(shí)用的圖表插件(jquery)

一般情況下我最細(xì)的是餅圖，給人的感覺就是很不錯(cuò)。以上兩個(gè)圖其實(shí)就這是類型不同而已

復(fù)制代碼代碼如下:

	
	//餅圖 

	function QuarterPie(){ 

	$.ajax({ 

	url: "/Home/GetQuarterPie", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	title: "情緣圖表", 

	axis_labels: ["一月", "二月", "三月","四月"], 

	size: "400x200", 

	type: "p" 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarterPie"); 

	} 

	}); 

	} 

	//3D餅圖 

	function Quarter3DPie(){ 

	$.ajax({ 

	url: "/Home/GetQuarterPie", 

	success: function (data) { 

	var json = eval(data); 

	var opt = { 

	data: json, 

	title: "情緣圖表", 

	axis_labels: ["一月", "二月", "三月","四月"], 

	size: "400x200", 

	type: "p3" 

	}; 

	var api = new jGCharts.Api(); 

	jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarter3DPie"); 

	} 

	}); 

	}

五代碼分析
從上面的代碼可以看出，其實(shí)使用這個(gè)插件制作圖表就類型的不同而已。需要修改的是 type 這個(gè)值
這里介紹type支持的類型：
折線圖 lc
點(diǎn)線圖 lxy
Sparkline 圖 ls
疊加型水平條形圖 bhs
疊加型垂直條形圖 bvs
水平條形圖 bhg
垂直條形圖 bvg
餅圖 p
三維餅圖 p3
維恩圖 v (目前沒有看到效果，各位可以嘗試)
散點(diǎn)圖 s (目前沒有看到效果，各位可以嘗試)
雷達(dá)圖 r (目前沒有看到效果，各位可以嘗試)
地圖 t (目前沒有看到效果，各位可以嘗試)
儀表 gom

六插件相關(guān)參數(shù)說明
data: 一個(gè)二維數(shù)組，參數(shù)類型如下：[[153, 60, 52], [113, 70, 60], [120, 80, 40]]
size：圖片顯示的大小 ( width x height ) 300x200
type：前面已經(jīng)說過了這里不再累述
xis_labels ：橫軸文字
legend ：圖例
bar_width : 20 默認(rèn) 20 條形寬度
bar_spacing : 1 默認(rèn)1 條形間距
colors : ['4b9b41','81419b','41599b'] 圖例顯示顏色
bg : 'e0e0e0' 背景顏色
bg_trasparency : 50 背景透明度
bg_offset : '000000' 漸變終結(jié)色
bg_angle : '45', 默認(rèn) 90 漸變角度
bg_type : 'gradient' 默認(rèn) solid 漸變方式
bg_width : '10' 默認(rèn) 10 漸變步伐
chbg : 'FFFFFF', 圖表區(qū)顏色
chbg_offset : '4b9b41' 圖表區(qū)漸變終結(jié)色
chbg_angle : '45' 默認(rèn)90 漸變角度
chbg_type : 'gradient' 默認(rèn) solid 漸變方式
title : 'Bar Chart', 圖表標(biāo)題
title_color : 'a98147',
title_size : 20 默認(rèn)10
grid : true, 默認(rèn) false 網(wǎng)格
grid_x : 5, 默認(rèn) 10 X軸網(wǎng)格寬度
grid_y : 5, 默認(rèn)格寬度
grid_line : 5, 默認(rèn)
grid_blank : 0 默認(rèn)度
fillarea : true 默認(rèn)圖表區(qū)
fillbottom : true 默認(rèn)下端
filltop : true 默認(rèn)充上端
lines: [[4,2,2],[6,3,3]] 點(diǎn)線圖，[線寬,點(diǎn)寬,空白寬]

七代碼示例下載
點(diǎn)擊下載，代碼有一部分是使用的的數(shù)據(jù)庫(kù)數(shù)據(jù)，因此運(yùn)行的時(shí)候可能會(huì)有問題，這里需要做相應(yīng)的修改！
這里就簡(jiǎn)單介紹到這里，如果各位有興趣可以嘗試修改其中的效果來看看運(yùn)行效果