欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2011年07月07日 12:26:05   作者:  
這里介紹一款簡單實用的圖表插件,該圖表插件是基于jquery和jquery的插件 gchart很容易實現(xiàn)的,而gchart插件是封裝了google的圖表api 。

一  柱狀圖

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

 

以上數(shù)據(jù)取自某個網(wǎng)站六個月份的用戶注冊量 。從以上數(shù)據(jù)可以看出,一二月份注冊用戶數(shù)為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) 豎狀多行條形直方圖效果圖:
以上數(shù)據(jù)和第一種情況差不多,這是這里是做的季度統(tǒng)計,這里做了第一季度和第二季度的相關(guān)數(shù)據(jù)統(tǒng)計。顯示結(jié)果如圖
復制代碼 代碼如下:

//季度報表
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");
}
});
}

二  堆棧圖

 

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

復制代碼 代碼如下:

//分數(shù)統(tǒng)計
function ScoreReport(){
$.ajax({
url: "/Home/GetScore",
success: function (data) {
var json = eval(data);
var opt = {
data: json,
axis_labels: ["賀臣", "情緣", "木木"],
legend: ["語文", "數(shù)學", "英語","綜合"],
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

六 插件相關(guān)參數(shù)說明
data: 一個二維數(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 默認 20 條形寬度
bar_spacing : 1 默認1 條形間距
colors : ['4b9b41','81419b','41599b'] 圖例顯示顏色
bg : 'e0e0e0' 背景顏色
bg_trasparency : 50 背景透明度
bg_offset : '000000' 漸變終結(jié)色
bg_angle : '45', 默認 90 漸變角度
bg_type : 'gradient' 默認 solid 漸變方式
bg_width : '10' 默認 10 漸變步伐
chbg : 'FFFFFF', 圖表區(qū)顏色
chbg_offset : '4b9b41' 圖表區(qū)漸變終結(jié)色
chbg_angle : '45' 默認90 漸變角度
chbg_type : 'gradient' 默認 solid 漸變方式
title : 'Bar Chart', 圖表標題
title_color : 'a98147',
title_size : 20 默認10
grid : true, 默認 false 網(wǎng)格
grid_x : 5, 默認 10 X軸網(wǎng)格寬度
grid_y : 5, 默認格寬度
grid_line : 5, 默認
grid_blank : 0 默認度
fillarea : true 默認圖表區(qū)
fillbottom : true 默認下端
filltop : true 默認充上端
lines: [[4,2,2],[6,3,3]] 點線圖,[線寬,點寬,空白寬]

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

相關(guān)文章

  • Asp.Net類庫中發(fā)送電子郵件的代碼

    Asp.Net類庫中發(fā)送電子郵件的代碼

    發(fā)送電子郵件是許多需要用戶注冊的網(wǎng)站的通用功能,通過正則表達式我們可以過濾掉不符合電子郵件格式的輸入,但是仍沒有辦法確保用戶填寫的電子郵件地址一定是他本人真實有效的電子郵件地址
    2008-09-09
  • visual studio 2012安裝配置方法圖文教程 附opencv配置教程

    visual studio 2012安裝配置方法圖文教程 附opencv配置教程

    這篇文章主要為大家分享了visual studio 2012安裝配置方法圖文教程,文中附opencv配置教程,文中安裝步驟介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • 解析ABP框架中的數(shù)據(jù)傳輸對象與應用服務

    解析ABP框架中的數(shù)據(jù)傳輸對象與應用服務

    ABP框架是基于ASP.NET的Web開發(fā)框架,在ABP中應用服務將領(lǐng)域邏輯暴露給展現(xiàn)層,展現(xiàn)層通過傳入數(shù)據(jù)傳輸對象參數(shù)來調(diào)用應用服務,而這里我們就來解析ABP框架中的數(shù)據(jù)傳輸對象與應用服務
    2016-06-06
  • 初學者的福音:游戲開發(fā)新手入門指南

    初學者的福音:游戲開發(fā)新手入門指南

    初學者的福音:游戲開發(fā)新手入門指南...
    2006-09-09
  • .NET 操作 PostgreSQL遇到的問題

    .NET 操作 PostgreSQL遇到的問題

    這篇文章主要介紹了.NET 操作 PostgreSQL遇到的問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-01
  • 樹莓派ASP.NET環(huán)境配置過程詳解

    樹莓派ASP.NET環(huán)境配置過程詳解

    這篇文章主要介紹了樹莓派ASP.NET環(huán)境配置,本篇文章內(nèi)容是根據(jù)mono官網(wǎng)上查閱的配置教程所寫,需要的朋友可以參考下
    2022-04-04
  • .NET Core3.0 日志 logging的實現(xiàn)

    .NET Core3.0 日志 logging的實現(xiàn)

    這篇文章主要介紹了.NET Core3.0 日志 logging的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-10-10
  • asp.net讀取模版并寫入文本文件

    asp.net讀取模版并寫入文本文件

    本文要介紹的是ASP.NET怎樣讀寫文本文件,但更重要的是實現(xiàn)的過程。使用的工具是Visual Studio 2015 ,.NET版本是4.6.1 。一共建立的2個項目,HoverTreePanel和HoverTreeWeb,都是ASP.NET項目。文章末尾附源碼下載。下面跟著小編一起來看下吧
    2017-01-01
  • ASP.NET Razor模板引擎中輸出Html的兩種方式

    ASP.NET Razor模板引擎中輸出Html的兩種方式

    這篇文章主要介紹了ASP.NET Razor模板引擎中輸出Html的兩種方式,結(jié)合實例形式分析了Html.Raw與MvcHtmlString類輸出HTML的實現(xiàn)技巧,需要的朋友可以參考下
    2016-08-08
  • 如何取得Repeater控件選擇的項目及注意事項

    如何取得Repeater控件選擇的項目及注意事項

    Repeater控件,每個item前有一個CheckBox,把選擇的item列顯出來,有兩個地方需要注意的,就是CheckBox與Label,這個Label是隨你需要獲取的內(nèi)容而變化喔。如你想獲取Nickname,那你需要把綁定的的內(nèi)容放在Label上
    2013-01-01

最新評論