ASP.NET画图全攻略（上）

ASP.NET画图全攻略（上）2012-01-18本文代码是基于Beta2开发

越来越多的Web应用需要使用图表来进行数据显示和分析。例如：投票结果显示，公司生产情况统计图显示分析等等。利用图表来显示数据，具有直观，清晰等优点。

传统的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;}}}