用ASP.net/C#画条形图，饼状图，曲线图的源代码

Chart.aspx.cs的代码： using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Drawing; using System.Drawing.Imaging; namespace aspCharts { /// /// Chart 的摘要说明。 /// public class Chart : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { Graphics objGraphics;//建立画板对象 Bitmap objBitMap = new Bitmap(600,300);//建立位图对象 objGraphics = Graphics.FromImage(objBitMap);//根据位图对象建立画板对象 objGraphics.Clear(Color.White);//设置画板对象的背景色 int[] arrValues={0,0,0,0,0,0};//数据数组 arrValues[0]=50; arrValues[1]=70; arrValues[2]=90; arrValues[3]=100; arrValues[4]=140; arrValues[5]=220; string[] arrValueNames={”0″,”0″,”0″,”0″,”0″,”0″};//月份 arrValueNames[0] = “一月”; arrValueNames[1]=”二月”; arrValueNames[2] = “三月”; arrValueNames[3]=”四月”; arrValueNames[4]=”五月”; arrValueNames[5]=”六月”; objGraphics.DrawString(”上半年销售情况统计”,new Font(”宋体”,16),Brushes.Black,new PointF(0,0)); //创建图例文字 PointF symbolLeg = new PointF(335,20); PointF descLeg = new PointF(360,16); //画出图例。利用objGraphics图形对象的三个方法画出图例： //FillRectangle()方法画出填充矩形，DrawRectangle()方法画出矩形的边框， //DrawString()方法画出说明文字。这三个图形对象的方法在 .NET 框架类库类库中均已重载， //可以很方便根据不同的参数来画出图形。 for(int i=0;i { objGraphics.FillRectangle(new SolidBrush(GetColor(i)),symbolLeg.X,symbolLeg.Y,20,10); objGraphics.DrawRectangle(Pens.Black,symbolLeg.X,symbolLeg.Y,20,10); objGraphics.DrawString(arrValueNames[i].ToString(),new Font(”宋体”,10),Brushes.Black,descLeg); symbolLeg.Y += 15; descLeg.Y += 15; } for(int j = 0;j { objGraphics.FillRectangle(new SolidBrush(GetColor(j)),(j*35)+15,200-arrValues[j],20,arrValues[j]+5); objGraphics.DrawRectangle(Pens.Black,(j*35)+15,200-arrValues[j],20,arrValues[j]+5); } float sglCurrentAngle; float sglTotalAngle=0; for (int a = 0; a < arrValues.Length; a++) { sglTotalAngle += arrValues[a];//取得数据总量 } float startAngle = 0; for (int b = 0; b < arrValues.Length; b++) { sglCurrentAngle = arrValues[b] / sglTotalAngle * 360;//求出该数据所占总数据的百分比 objGraphics.FillPie(new SolidBrush(GetColor(b)), 220, 95, 100, 100, startAngle, sglCurrentAngle);//画出椭圆 startAngle += sglCurrentAngle; } objBitMap.Save(Response.OutputStream,ImageFormat.Gif);//该位图对象以”GIF”格式输出 } private Color GetColor(int itemIndex) { Color objColor = new Color(); switch(itemIndex) { case 0: objColor = Color.Blue; break; case 1: objColor = Color.Yellow; break; case 2: objColor = Color.Red; break; case 3: objColor = Color.Orange; break; case 4: objColor = Color.Purple; break; case 5: objColor = Color.Brown; break; case 6: default: objColor = Color.Blue; break; } return objColor; } #region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } } 用ASP.Net画条形图和饼图 【摘 要】越来越多的Web应用需要使用图表来进行数据显示和分析，利用ASP.NET中关于图形显示的类，就可以画出丰富，动态的图表。 本文代码是基于Beta2开发 例如：投票结果显示，公司生产情况统计图显示分析等等。利用图表来显示数据，具有直观，清晰等优点。 传统的ASP技术是不支持画图表的，那么就不得不利用Active X或者Java applets来实现这个功能。新近出现的ASP.NET解决了这个问题，只要利用ASP.NET中关于图形显示的类，就可以画出丰富，动态的图表。本文将要讲述如何利用ASP.NET技术结合ADO.NET技术画条形图和饼图。 首先建立一个c#的类库。 打开vs.net，建立一个名为Insight_cs.WebCharts新的类库工程，将解决方案的名称改为Insight，将Class.cs文件名改为Insight_cs.WebCharts.cs，最后打开Insight_cs.WebCharts.cs文件。其中代码如下： /*自定义类，通过输入不同的参数，这些类可以画不同的图形 */ using System; using System.IO;//用于文件存取 using System.Data;//用于数据访问 using System.Drawing;//提供画GDI+图形的基本功能 using System.Drawing.Text;//提供画GDI+图形的高级功能 using System.Drawing.Drawing2D;//提供画高级二维，矢量图形功能 using System.Drawing.Imaging;//提供画GDI+图形的高级功能 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]; //通过输入参数，取得饼图中的总基数 float sumData = 0; foreach(DataRow dr in dt.Rows) { sumData += Convert.ToSingle(dr[1]); } //产生一个image对象，并由此产生一个Graphics对象 Bitmap bm = new Bitmap(width,height); Graphics g = Graphics.FromImage(bm); //设置对象g的属性 g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH, (Convert.ToSingle(height))/SIDE_LENGTH); g.SmoothingMode = SmoothingMode.Default; g.TextRenderingHint = TextRenderingHint.AntiAlias; //画布和边的设定 g.Clear(Color.White); g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1); //画饼图标题 g.DrawString(title,new Font("Tahoma",24), Brushes.Black,new PointF(5,5)); //画饼图的图例 g.DrawString(subTitle,new Font("Tahoma",14), Brushes.Black,new PointF(7,35)); //画饼图 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; } //画图例框及其文字 g.DrawRectangle(Pens.Black,200,300,199,99); g.DrawString("Legend",new Font("Tahoma",12,FontStyle.Bold), Brushes.Black,new PointF(200,300)); //画图例各项 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; } //通过Response.OutputStream，将图形的内容发送到浏览器 bm.Save(target, ImageFormat.Gif); //回收资源 bm.Dispose(); g.Dispose(); } } //画条形图 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]; //计算最高的点 float highPoint = 0; foreach(DataRow dr in dt.Rows) { if(highPoint<Convert.ToSingle(dr[1])) { highPoint = Convert.ToSingle(dr[1]); } } //建立一个Graphics对象实例 Bitmap bm = new Bitmap(width,height); Graphics g = Graphics.FromImage(bm); //设置条图图形和文字属性 g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH, (Convert.ToSingle(height))/SIDE_LENGTH); g.SmoothingMode = SmoothingMode.Default; g.TextRenderingHint = TextRenderingHint.AntiAlias; //设定画布和边 g.Clear(Color.White); g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1); //画大标题 g.DrawString(title,new Font("Tahoma",24),Brushes.Black,new PointF(5,5)); //画小标题 g.DrawString(subTitle,new Font("Tahoma",14), Brushes.Black,new PointF(7,35)); //画条形图 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); } //设置边 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)); //画图例框和文字 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)); //画图例 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; } //输出图形 bm.Save(target, ImageFormat.Gif); //资源回收 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;//用于数据访问 using System.Drawing;//提供画GDI+图形的基本功能 using System.Drawing.Text;//提供画GDI+图形的高级功能 using System.Drawing.Drawing2D;//提供画高级二维，矢量图形功能 using System.Drawing.Imaging;//提供画GDI+图形的高级功能 这些namespace将在后面被应用。 2.自定义一个namespace为Insight_cs.WebCharts，其中包括了两个类PieChart和BarChart，很清楚，class PieChart是为画饼图而建，class BarChart是为画条形图而建。由于class PieChart和class BarChar差不多，所以下面我们以饼图为例，进行代码分析。 3.类PieChart建立一个方法Render，此方法可以含一些参数。简单说明如下： 参数title，表示饼图上方的大标题文字。 参数subtitle，表示饼图上方的小标题文字。 参数width，height，表示了整个图形的大小。 参数charData是一个DataSet对象实例，用于画图使用。 参数target是Stream对象的实例，用于图形输出时使用。 4.为了增加可读性，定义一些常量： const int SIDE_LENGTH = 400;//画布边长 const int PIE_DIAMETER = 200;//饼图直径 5.定义一个DataTable，它是DataSet中的一个数据表。其中存放了饼图的各个数据。 6.通过计算，得出饼图中的总基数sumData。 7.建立了一个BitMap对象，它为要创建的图形提供了内存空间。并由此产生一个Graphics对象，它封装了GDI+画图接口。 8.调用Graphics对象的方法ScaleTransform()，它是用来设定图形比例的。 9.调用方法SmoothingMode()，TextRenderingHint()等来设置文字和图形的相关属性。 9.设置画布和边。 10.设置文字标题，图例，画饼图自身。 11.通过Stream，将图形的内容发送到浏览器。 12.最后回收资源。 至此画饼图的类就完成了。画条形图的方法和画饼图的方法大同小异，这里就不展开讲了。 总体看来，构建画图的类没有我们想象的那样难，并没有多么高深的算法。其实整体思路，就好像我们用笔在纸上画图是一摸一样的。关键是各个方法的使用和参数设置。 我们在前面已经完成了饼图和条形图的自定义类，下面我们将要应用这些类了。 使用vs.net新建一个名为Insight_cs的Web应用程序，并且添加到刚才的Insight工程中。删除默认的webform1.aspx文件，新建一个名为SalesChart.aspx文件。打开此文件，在代码模式下，将第一行替换为： 打开文件SalesChart.aspx.cs，其中代码如下所示： using System; using System.Data; using System.Web; using System.IO; using System.Data.SqlClient; using Insight_cs.WebCharts;//这是自定义的名字空间 namespace Insight_cs { public class SalesChart : System.Web.UI.Page { public SalesChart() { Page.Init += new System.EventHandler(Page_Init); } private void Page_Load(object sender, System.EventArgs e) { //从数据库中取得数据，用于画图 string sql = "SELECT " +"Year(sa.ord_date) As [Year], " +"SUM(sa.qty) As [Qty] " +"FROM " +"sales sa " +"inner join stores st on(sa.stor_id = st.stor_id) " +"GROUP BY " +"Year(sa.ord_date) " + "ORDER BY " + "[Year]"; string connectString = "Password=ben; User ID=sa; DataBase=pubs;Data Source=localhost"; SqlDataAdapter da = new SqlDataAdapter(sql,connectString); DataSet ds = new DataSet(); int rows = da.Fill(ds,"chartData"); //设定产生图的类型（pie or bar） string type = ""; if(null==Request["type"]) { type = "PIE"; } else { type = Request["type"].ToString().ToUpper(); } //设置图大小 int width = 0; if(null==Request["width"]) { width = 400; } else { width = Convert.ToInt32(Request["width"]); } int height = 0; if(null==Request["height"]) { height = 400; } else { height = Convert.ToInt32(Request["height"]); } //设置图表标题 string title = ""; if(null!=Request["title"]) { title = Request["title"].ToString(); } string subTitle = ""; if(null!=Request["subtitle"]) { subTitle = Request["subtitle"].ToString(); } if(0<rows) { switch(type) { case "PIE": PieChart pc = new PieChart(); pc.Render(title,subTitle,width,height,ds,Response.OutputStream); break; case "BAR": BarChart bc = new BarChart(); bc.Render(title,subTitle,width,height,ds,Response.OutputStream); break; default: break; } } } private void Page_Init(object sender, EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); } #region Web Form Designer generated code ///

/// Required method for Designer support - do not modify /// the contents of this method with the code editor. ///

private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } } 以上的代码并没有什么难的，这里就不做分析了。 在vs.net中，打开Insight_cs solution，右击”引用“，将出现”添加引用“，将组件文件Insight_cs.WebCharts.dll加入，使其成为项目中的namespace。 下面我们就可以浏览结果了。 首先建立一个demochart.aspx文件，在其代码中，加入一下内容： type表示显示图形的类型，是饼图pie，还是条形图bar。 width，height表示图形的大小。 title表示大标题文字。 subtitle表示小标题文字。 。 由此，我们完成了利用asp.net技术画图的过程。 综合起来，可以总结出以下几点：1.利用ASP.NET技术，可以在不使用第三方组件的情况下，画出理想的图形。2.画图核心是构造一个BitMap（位图）对象，它为要创建的图形提供了内存空间。然后，利用有关namespace提供的类和方法画出图形。最后就可以调用Bitmap对象的“Save”方法，将其发送到任何.NET的输出流中，这里是直接将图形的内容发送到浏览器，而没有将其保存到磁盘中。