asp.net中一款極為簡單實用的圖表外掛程式(jquery)

一 柱狀圖

(1) 豎狀單行條形長條圖：

以上資料取自某個網站六個月份的使用者註冊量 。從以上資料可以看出，一二月份註冊使用者數為0，圖表能夠清晰對比每個月份使用者註冊量的變化。

複製代碼 代碼如下://月度報表
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) 豎狀多行條形長條圖：
以上資料和第一種情況差不多，這是這裡是做的季度統計，這裡做了第一季度和第二季度的相關資料統計。顯示結果 複製代碼 代碼如下://季度報表
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) 橫條多行條形長條圖：

這種情況是上面一種情況的變相顯示，只不過橫縱座標修改了。

複製代碼 代碼如下://季度報表
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");
}
});
}

二 堆棧圖

堆棧圖多用於顯示資料變化程度，此處顯示了各科分數的情況，似乎不是太直觀。但是這裡能夠顯示此種效果就夠了

複製代碼 代碼如下://分數統計
function ScoreReport(){
$.ajax({
url: "/Home/GetScore",
success: function (data) {
var json = eval(data);
var opt = {
data: json,
axis_labels: ["賀臣", "情緣", "木木"],
legend: ["語文", "數學", "英語","綜合"],
title: "情緣圖表",
size: "400x200",
type: "bhs"
};
var api = new jGCharts.Api();
jQuery('<img>').attr('src', api.make(opt)).appendTo("#myScoreReport");
}
});
}

三 折線圖

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

複製代碼 代碼如下://溫度走勢圖
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");
}
});
}

四 餅圖

一般情況下我最細的是餅圖，給人的感覺就是很不錯。 以上兩個圖其實就這是類型不同而已

複製代碼 代碼如下://餅圖
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");
}
});
}

五 程式碼分析
從上面的代碼可以看出，其實使用這個外掛程式製作圖表就類型的不同而已。需要修改的是 type 這個值
這裡介紹type支援的類型：
折線圖 lc
點線圖 lxy
Sparkline 圖 ls
疊加型水平橫條圖 bhs
疊加型垂直橫條圖 bvs
水平橫條圖 bhg
垂直橫條圖 bvg
餅圖 p
三維餅圖 p3
維恩圖 v (目前沒有看到效果，各位可以嘗試)
散佈圖 s (目前沒有看到效果，各位可以嘗試)
雷達圖 r (目前沒有看到效果，各位可以嘗試)
地圖 t (目前沒有看到效果，各位可以嘗試)
儀錶 gom

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

七 程式碼範例下載
點擊下載， 代碼有一部分是使用的的資料庫資料，因此啟動並執行時候可能會有問題，這裡需要做相應的修改！
這裡就簡單介紹到這裡，如果各位有興趣可以嘗試修改其中的效果來看看運行效果