ASP.NET畫圖全攻略(上)_.Net教程
推薦:ASP.NET的實(shí)時(shí)天氣及24小時(shí)天氣預(yù)報(bào)修改其中的url獲得其他城市的天氣情況 如廣州為: http://weather.yahoo.com/forecast/CHXX0037_c.html 注意僅適用于獲得yahoo上的天氣預(yù)報(bào)
本文代碼是基于Beta2開發(fā)
越來(lái)越多的Web應(yīng)用需要使用圖表來(lái)進(jìn)行數(shù)據(jù)顯示和分析。例如:投票結(jié)果顯示,公司生產(chǎn)情況統(tǒng)計(jì)圖顯示分析等等。利用圖表來(lái)顯示數(shù)據(jù),具有直觀,清晰等優(yōu)點(diǎn)。
傳統(tǒng)的ASP技術(shù)是不支持畫圖表的,那么就不得不利用Active X或者Java applets來(lái)實(shí)現(xiàn)這個(gè)功能。新近出現(xiàn)的ASP.NET解決了這個(gè)問(wèn)題,只要利用ASP.NET中關(guān)于圖形顯示的類,就可以畫出豐富,動(dòng)態(tài)的圖表(如圖1)。本文將要講述如何利用ASP.NET技術(shù)結(jié)合ADO.NET技術(shù)畫條形圖和餅圖。
首先建立一個(gè)c#的類庫(kù)。
打開vs.net,建立一個(gè)名為Insight_cs.WebCharts新的類庫(kù)工程,將解決方案的名稱改為Insight,將Class.cs文件名改為Insight_cs.WebCharts.cs,最后打開Insight_cs.WebCharts.cs文件。其中代碼如下:
| 以下為引用的內(nèi)容: /*自定義類,通過(guò)輸入不同的參數(shù),這些類可以畫不同的圖形 */ using System; using System.IO;//用于文件存取 using System.Data;//用于數(shù)據(jù)訪問(wèn) using System.Drawing;//提供畫GDI 圖形的基本功能 using System.Drawing.Text;//提供畫GDI 圖形的高級(jí)功能 using System.Drawing.Drawing2D;//提供畫高級(jí)二維,矢量圖形功能 using System.Drawing.Imaging;//提供畫GDI 圖形的高級(jí)功能 namespace Insight_cs.WebCharts { public class PieChart { public PieChart() { } public void Render(string title, string subTitle, int width, int height, DataSet chartData, Stream target) { const int SIDE_LENGTH = 400; const int PIE_DIAMETER = 200; DataTable dt = chartData.Tables[0]; file://通過(guò)輸入?yún)?shù),取得餅圖中的總基數(shù) float sumData = 0; foreach(DataRow dr in dt.Rows) { sumData = Convert.ToSingle(dr[1]); } file://產(chǎn)生一個(gè)image對(duì)象,并由此產(chǎn)生一個(gè)Graphics對(duì)象 Bitmap bm = new Bitmap(width,height); Graphics g = Graphics.FromImage(bm); file://設(shè)置對(duì)象g的屬性 g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH); g.SmoothingMode = SmoothingMode.Default; g.TextRenderingHint = TextRenderingHint.AntiAlias; file://畫布和邊的設(shè)定 g.Clear(Color.White); g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1); file://畫餅圖標(biāo)題 g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5)); file://畫餅圖的圖例 g.DrawString(subTitle,new Font("Tahoma",14),Brushes.Black,new PointF(7,35)); file://畫餅圖 float curAngle = 0; float totalAngle = 0; for(int i=0;i<dt.Rows.Count;i ) { curAngle = Convert.ToSingle(dt.Rows[i][1]) / sumData * 360; g.FillPie(new SolidBrush(ChartUtil.GetChartItemColor(i)),100,65,PIE_DIAMETER,PIE_DIAMETER,totalAngle,curAngle); g.DrawPie(Pens.Black,100,65,PIE_DIAMETER,PIE_DIAMETER,totalAngle,curAngle); totalAngle = curAngle; } file://畫圖例框及其文字 g.DrawRectangle(Pens.Black,200,300,199,99); g.DrawString("Legend",new Font("Tahoma",12,FontStyle.Bold),Brushes.Black,new PointF(200,300)); file://畫圖例各項(xiàng) PointF boxOrigin = new PointF(210,330); PointF textOrigin = new PointF(235,326); float percent = 0; for(int i=0;i<dt.Rows.Count;i ) { g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)),boxOrigin.X,boxOrigin.Y,20,10); g.DrawRectangle(Pens.Black,boxOrigin.X,boxOrigin.Y,20,10); percent = Convert.ToSingle(dt.Rows[i][1]) / sumData * 100; g.DrawString(dt.Rows[i][0].ToString() " - " dt.Rows[i][1].ToString() " (" percent.ToString("0") "%)",new Font("Tahoma",10),Brushes.Black,textOrigin); boxOrigin.Y = 15; textOrigin.Y = 15; } file://通過(guò)Response.OutputStream,將圖形的內(nèi)容發(fā)送到瀏覽器 bm.Save(target, ImageFormat.Gif); file://回收資源 bm.Dispose(); g.Dispose(); } } file://畫條形圖 public class BarChart { public BarChart() { } public void Render(string title, string subTitle, int width, int height, DataSet chartData, Stream target) { const int SIDE_LENGTH = 400; const int CHART_TOP = 75; const int CHART_HEIGHT = 200; const int CHART_LEFT = 50; const int CHART_WIDTH = 300; DataTable dt = chartData.Tables[0]; file://計(jì)算最高的點(diǎn) float highPoint = 0; foreach(DataRow dr in dt.Rows) { if(highPoint<Convert.ToSingle(dr[1])) { highPoint = Convert.ToSingle(dr[1]); } } file://建立一個(gè)Graphics對(duì)象實(shí)例 Bitmap bm = new Bitmap(width,height); Graphics g = Graphics.FromImage(bm); file://設(shè)置條圖圖形和文字屬性 g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH); g.SmoothingMode = SmoothingMode.Default; g.TextRenderingHint = TextRenderingHint.AntiAlias; file://設(shè)定畫布和邊 g.Clear(Color.White); g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1); file://畫大標(biāo)題 g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5)); file://畫小標(biāo)題 g.DrawString(subTitle,new Font("Tahoma",14),Brushes.Black,new PointF(7,35)); file://畫條形圖 float barWidth = CHART_WIDTH / (dt.Rows.Count * 2); PointF barOrigin = new PointF(CHART_LEFT (barWidth / 2),0); float barHeight = dt.Rows.Count; for(int i=0;i<dt.Rows.Count;i ) { barHeight = Convert.ToSingle(dt.Rows[i][1]) * 200 / highPoint; barOrigin.Y = CHART_TOP CHART_HEIGHT - barHeight; g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)),barOrigin.X,barOrigin.Y,barWidth,barHeight); barOrigin.X = barOrigin.X (barWidth * 2); } file://設(shè)置邊 g.DrawLine(new Pen(Color.Black,2),new Point(CHART_LEFT,CHART_TOP),new Point(CHART_LEFT,CHART_TOP CHART_HEIGHT)); g.DrawLine(new Pen(Color.Black,2),new Point(CHART_LEFT,CHART_TOP CHART_HEIGHT),new Point(CHART_LEFT CHART_WIDTH,CHART_TOP CHART_HEIGHT)); file://畫圖例框和文字 g.DrawRectangle(new Pen(Color.Black,1),200,300,199,99); g.DrawString("Legend",new Font("Tahoma",12,FontStyle.Bold),Brushes.Black,new PointF(200,300)); file://畫圖例 PointF boxOrigin = new PointF(210,330); PointF textOrigin = new PointF(235,326); for(int i=0;i<dt.Rows.Count;i ) { g.FillRectangle(new SolidBrush(ChartUtil.GetChartItemColor(i)),boxOrigin.X,boxOrigin.Y,20,10); g.DrawRectangle(Pens.Black,boxOrigin.X,boxOrigin.Y,20,10); g.DrawString(dt.Rows[i][0].ToString() " - " dt.Rows[i][1].ToString(),new Font("Tahoma",10),Brushes.Black,textOrigin); boxOrigin.Y = 15; textOrigin.Y = 15; } file://輸出圖形 bm.Save(target, ImageFormat.Gif); file://資源回收 bm.Dispose(); g.Dispose(); } } public class ChartUtil { public ChartUtil() { } public static Color GetChartItemColor(int itemIndex) { Color selectedColor; switch(itemIndex) { case 0: selectedColor = Color.Blue; break; case 1: selectedColor = Color.Red; break; case 2: selectedColor = Color.Yellow; break; case 3: selectedColor = Color.Purple; break; default: selectedColor = Color.Green; break; } return selectedColor; } } } |
代碼分析:
1、引入一些namespace
using System;
using System.IO;//用于文件存取
using System.Data;//用于數(shù)據(jù)訪問(wèn)
using System.Drawing;//提供畫GDI 圖形的基本功能
using System.Drawing.Text;//提供畫GDI 圖形的高級(jí)功能
using System.Drawing.Drawing2D;//提供畫高級(jí)二維,矢量圖形功能
using System.Drawing.Imaging;//提供畫GDI 圖形的高級(jí)功能
這些namespace將在后面被應(yīng)用。
2、自定義一個(gè)namespace為Insight_cs.WebCharts,其中包括了兩個(gè)類PieChart和BarChart,很清楚,class PieChart是為畫餅圖而建,class BarChart是為畫條形圖而建。由于class PieChart和class BarChar差不多,所以下面我們以餅圖為例,進(jìn)行代碼分析。
3、類PieChart建立一個(gè)方法Render,此方法可以含一些參數(shù)。簡(jiǎn)單說(shuō)明如下:
參數(shù)title,表示餅圖上方的大標(biāo)題文字。
參數(shù)subtitle,表示餅圖上方的小標(biāo)題文字。
參數(shù)width,height,表示了整個(gè)圖形的大小。
參數(shù)charData是一個(gè)DataSet對(duì)象實(shí)例,用于畫圖使用。
參數(shù)target是Stream對(duì)象的實(shí)例,用于圖形輸出時(shí)使用。
4、為了增加可讀性,定義一些常量:
const int SIDE_LENGTH = 400;//畫布邊長(zhǎng)
const int PIE_DIAMETER = 200;//餅圖直徑
5、定義一個(gè)DataTable,它是DataSet中的一個(gè)數(shù)據(jù)表。其中存放了餅圖的各個(gè)數(shù)據(jù)。
6、通過(guò)計(jì)算,得出餅圖中的總基數(shù)sumData。
7、建立了一個(gè)BitMap對(duì)象,它為要?jiǎng)?chuàng)建的圖形提供了內(nèi)存空間。并由此產(chǎn)生一個(gè)Graphics對(duì)象,它封裝了GDI 畫圖接口。
8、調(diào)用Graphics對(duì)象的方法ScaleTransform(),它是用來(lái)設(shè)定圖形比例的。
9、調(diào)用方法SmoothingMode(),TextRenderingHint()等來(lái)設(shè)置文字和圖形的相關(guān)屬性。
9、設(shè)置畫布和邊。
10、設(shè)置文字標(biāo)題,圖例,畫餅圖自身。
11、通過(guò)Stream,將圖形的內(nèi)容發(fā)送到瀏覽器。
12、最后回收資源。
至此畫餅圖的類就完成了。畫條形圖的方法和畫餅圖的方法大同小異,這里就不展開講了。
總體看來(lái),構(gòu)建畫圖的類沒(méi)有我們想象的那樣難,并沒(méi)有多么高深的算法。其實(shí)整體思路,就好像我們用筆在紙上畫圖是一摸一樣的。關(guān)鍵是各個(gè)方法的使用和參數(shù)設(shè)置。
分享:在ASP.NET中進(jìn)行文件處理(1)一種程序設(shè)計(jì)語(yǔ)言,對(duì)文件處理的能力的大小往往也是一種語(yǔ)言功能大小的一種表現(xiàn)。在ASP.NET中,對(duì)于文件的處理主要是通過(guò).Net FrameWork SDK中的一個(gè)System.IO的名稱空間來(lái)實(shí)現(xiàn)了,在System.IO
- asp.net如何得到GRIDVIEW中某行某列值的方法
- .net SMTP發(fā)送Email實(shí)例(可帶附件)
- js實(shí)現(xiàn)廣告漂浮效果的小例子
- asp.net Repeater 數(shù)據(jù)綁定的具體實(shí)現(xiàn)
- Asp.Net 無(wú)刷新文件上傳并顯示進(jìn)度條的實(shí)現(xiàn)方法及思路
- Asp.net獲取客戶端IP常見(jiàn)代碼存在的偽造IP問(wèn)題探討
- VS2010 水晶報(bào)表的使用方法
- ASP.NET中操作SQL數(shù)據(jù)庫(kù)(連接字符串的配置及獲取)
- asp.net頁(yè)面?zhèn)髦禍y(cè)試實(shí)例代碼
- DataGridView - DataGridViewCheckBoxCell的使用介紹
- asp.net中javascript的引用(直接引入和間接引入)
- 三層+存儲(chǔ)過(guò)程實(shí)現(xiàn)分頁(yè)示例代碼
- 相關(guān)鏈接:
- 教程說(shuō)明:
.Net教程-ASP.NET畫圖全攻略(上)
。