ASP.NET中數據棒圖，餅圖，柱狀圖的實現

2019-11-17 01:38:54

字體：大中小

來源：轉載

供稿：網友

asp.net中數據棒圖，餅圖，柱狀圖的實現

Web中繪制圖形的方法大致有：

1. VML方式：功能強大，但是非常麻煩。

推薦：http://www.elook.net.cn/vml/

2.使用控件：Dandus, Aspose.chart，ComponentOne使用方便。雖然有破解，但非開源。

ComponetOne:http://blog.csdn.net/ChengKing/category/146827.aspx

3.結合OFFICEWeb Components開發。

4.使用商用工控組件。

5.自己編寫程序。

數據棒圖實現

棒圖實現最簡單，用顏色填充<span>元素即可。

//開始畫棒圖 for(i=0;i<20;++i){ totalCost1[i]=Math.abs(totalCost[i])*100/sum*1.25; //正值－藍色顯示 if(totalCost[i]>0) { parent.rightFrame.eval("Draw"+[i]).innerHTML = "<img src=images/blue.gif height=12 width=" + totalCost1[i] + ">" } else //負值－紅色顯示 parent.rightFrame.eval("Draw"+[i]).innerHTML = "<img src=images/red.gif height=12 width=" + totalCost1[i] + ">" }}

數據餅圖實現

來自 Terrylee的技術專欄

ASP.NET之所以能夠在客戶端瀏覽器中形成各種數據圖片，是因為在ASP.NET中提供了繪圖功能，具體的作法是先在服務器端創建一個Bitmap實例，然后利用ASP.NET中提供的繪圖功能，按照要生成的圖片的模樣，進行繪制，最后把繪制好的實例以數據流的方式傳送到客戶端的瀏覽器上，并形成圖片顯示出來。本文要介紹的在ASP.NET頁面中實現數據餅圖采用的基本也是這種方法。餅圖有時稱為"Pie"圖，本文要實現的數據餅圖模樣具體如圖01所示：圖01：在ASP.NET頁面中產生的數據餅圖　　一．本文程序設計和運行的軟件環境：　　（1）.微軟公司視窗2000服務器版。　　（2）.Visual Studio .Net正式版，.Net FrameWork SDK版本號3705。　　（3）.MDAC 2.6（Microsoft Data Acess Component）以上版本。　　二．數據字典：為了方便起見，本文選擇的數據庫類型為本地數據庫--access 2000，如果你使用的是其他數據庫類型，只需對下面介紹的程序中的關于數據庫連接的代碼進行相應的修改就可以了。Access數據庫名稱為"db2.mdb"，在此數據庫中只定義了一張數據表"MonthSale"，此表的結構如表01所示：

字段名稱	類型	說明
ID	自動編號	主鍵，遞增
YF	數字	銷售月份
SL	數字	銷量

　　　　　　　　　表01：MonthSale數據表的結構　　在定義完"db2.mdb"數據庫中的"MonthSale"數據表后，在MonthSale數據表中按照表02所示添加記錄：

ID	YF	SL
1	1	12
2	2	5
3	3	7
4	4	20
5	5	16
6	6	10
7	7	19
8	8	8
9	9	7
10	10	13
11	11	11
12	12	15

　　　　　　表02：MonthSale數據表中的記錄情況　　在MonthSale數據表中添加完這12條記錄后，保存"db2.mdb"數據庫到C盤的根目錄中。下面就要解決根據從數據庫中讀取的數據繪制Pie圖的方法。　　（1）.繪制數據Pie圖的實現方法：　　圖01所示的Pie圖看似是由一個圓形按照從數據庫中得到數據值的大小分割而成的，其實在具體實現時并非如此，圖01所示的Pie圖其實由許多根據從數據庫中數值大小，繪制相應的扇型，并由這些扇型組合而成的　　（2）.簡介ASP.NET頁面中繪制扇型要使用到的類及其方法：　　在本文和前文中，在ASP.NET頁面中實現繪圖功能主要使用的是Graphics類，Graphics類被封裝在命名空間"System.Drawing"中。Graphics類中定義了很多方法和屬性，這些方法和屬性都與繪圖有關，Graphics類中的常用成員具體可參閱表01和表02，表01是Graphics類中的常用方法及其說明，表02是Graphics類中常用屬性及其說明：

方法	說明
Clear	清除整個繪圖面并以指定背景色填充。
Dispose	釋放由此Graphics對象使用的所有資源。
DrawArc	繪制一段弧線，它表示由一對坐標、寬度和高度指定的橢圓部分。
DrawEllipse	繪制一個由邊框定義的橢圓。
DrawIcon	在指定坐標處繪制由指定的Icon對象表示的圖像。
DrawIconUnstretched	繪制指定的Icon對象表示的圖像，而不縮放該圖像。
DrawImage	在指定位置并且按原始大小繪制指定的Image對象。
DrawImageUnscaled	在坐標對所指定的位置并且按其原始大小繪制指定的Image對象。
DrawLine	繪制一條連接由坐標對指定的兩個點的線條。
DrawLines	繪制一系列連接一組Point結構的線段。
DrawPie	繪制一個扇形，該扇形由一個坐標對、寬度和高度以及兩條射線所指定的橢圓定義。
DrawPolygon	繪制由一組Point結構定義的多邊形。
DrawRectangle	繪制由坐標對、寬度和高度指定的矩形。
DrawRectangles	繪制一系列由Rectangle結構指定的矩形。
DrawString	在指定位置并且用指定的Brush和Font對象繪制指定的文本字符串。
FillClosedCurve	填充由Point結構數組定義的閉合基數樣條曲線的內部。
FillEllipse	填充邊框所定義的橢圓的內部，該邊框由一對坐標、一個寬度和一個高度指定。
FillPie	填充由一對坐標、一個寬度、一個高度以及兩條射線指定的橢圓所定義的扇形區的內部。
FillPolygon	填充Point結構指定的點數組所定義的多邊形的內部。
FillRectangle	填充由一對坐標、一個寬度和一個高度指定的矩形的內部。
FillRectangles	填充由Rectangle結構指定的一系列矩形的內部。
FillRegion	填充Region 對象的內部。
Flush	強制執行所有掛起的圖形操作并立即返回而不等待操作完成。
FromHdc	從設備上下文的指定句柄創建新的Graphics對象。
FromHwnd	從窗口的指定句柄創建新的Graphics對象。
FromImage	從指定的Image對象創建新Graphics對象。
GetHdc	獲取與此Graphics對象關聯的設備上下文的句柄。
ReleaseHdc	釋放通過以前對此Graphics對象GetHdc方法的調用獲得的設備上下文句柄。
ResetClip	將此Graphics對象的剪輯區域重置為無限區域。
ResetTransform	將此Graphics對象的全局變換矩陣重置為單位矩陣。

　　　　　　　　　　　表01：Graphics類中的常用方法及其說明　　在本文中使用最多，也是最重要的方法就是：FillPie和DrawPie方法。這二個方法的具體使用方法，在下文中又詳細介紹。

屬性	說明
Clip	獲取或設置Region對象，該對象限定此Graphics對象的繪圖區域。
ClipBounds	獲取RectangleF結構，該結構限定此Graphics對象的剪輯區域。
DpiX	獲取此Graphics對象的水平分辨率。
DpiY	獲取此Graphics對象的垂直分辨率。
PageScale	獲取或設置此Graphics對象的全局單位和頁單位之間的比例。
PageUnit	獲取或設置用于此Graphics對象中的頁坐標的度量單位。
PixelOffsetMode	獲取或設置一個值，該值指定在呈現此Graphics對象的過程中像素如何偏移。
RenderingOrigin	為抵色處理和陰影畫筆獲取或設置此Graphics對象的呈現原點。
SmoothingMode	獲取或設置此Graphics對象的呈現質量。
TextRenderingHint	獲取或設置與此Graphics對象關聯的文本的呈現模式。
Transform	獲取或設置此Graphics對象的全局變換。
VisibleClipBounds	獲取或設置此Graphics對象的可見剪輯區域的邊框。

　　　　　　　　　　　　　表02：Graphics類中的常用屬性及其說明　　（3）.利用FillPie和DrawPie方法繪制扇型的具體方法：　　DrawPie方法功能是繪制一個扇型，下面是 DrawPie方法的一種調用語法，此語法也是本文中主要的調用方式，具體如下：　　public void DrawPie ( Pen , float , float , float , float , float , float ) ;　　此種DrawPie調用方法是由七個參數組成，這七個參數的具體說明如下：　　第一個參數：定義繪制扇型的畫筆類型；　　第二和第三個參數：定義扇型的坐標；　　第四和第五個參數：定義組成扇型的二個射線的長度；　　第六和第七個參數：定義扇型的開始角度和扇型旋轉的角度大小。其中把X坐標的正方向定為0度角，計算扇型的開始角度的按照順時針方向旋轉，最先到達的扇型的那條射線和0度角之間的夾角。　　下列代碼就是在ASP.NET頁面中繪制一個扇型：

Bitmap bm = new Bitmap ( 600 , 300 ) ;//創建一個長度為600，寬帶為300的Bitmap實例Graphics g ;g = Graphics.FromImage ( bm ) ;//由此Bitmap實例創建Graphic實例g . Clear ( Color . Snow ) ;g.DrawPie ( Pens.Red , 50 , 50 , 150 , 150 , 0 , 30 ) ;

　四．ASP.NET頁面中實現數據Pie圖實現步驟　　在實現數據Pie圖之前，首先要確保在C盤的根目錄存在"db.mdb"數據庫，并且此數據庫已經設定完畢，并且存在《在ASP.NET頁面中實現數據棒圖》一文中的數據。下面是ASP.NET實現數據Pie圖的具體步驟，開發工具使用的是Visual Studio .Net，采用的是C＃語言。　　1. 啟動Visual Studio .Net。　　2. 選擇菜單【文件】|【新建】|【項目】后，彈出【新建項目】對話框。　　3. 將【項目類型】設置為【Visual C＃項目】。　　4. 將【模板】設置為【ASP.NET Web 應用程序】。　　5. 在【位置】的文本框中輸入"http://localhost/Pie"。然后單擊【確定】按鈕，這樣在Visual Studio .Net就會在當前項目文件所在目錄中建立一個名稱為"Pie"文件夾，里面存放是此項目的項目文件，項目中的其他文件存放的位置是計算機Internet信息服務的默認的Web站點所在的目錄中新建的一個名稱為"WebPieDemo"的文件夾中　6. 把Visual Studio .Net的當前窗口切換到WebForm的代碼編輯窗口，即：WebForm1.aspx.cs文件的編輯窗口。　　7. 在WebForm1.aspx.cs文件首部，用下列代碼替換WebForm1.aspx.cs中導入命名空間的代碼：