注册登录

ASP.NET画图全攻略（上）

时间:2016-02-24 15:02 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【ASP.NET画图全攻略（上）】，下面是详细的分享！

ASP.NET画图全攻略（上）

本文代码是基于Beta2开发

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

传统的ASP技术是不支持画图表的，那么就不得不利用Active X或者Java applets来实现这个功能。新近出现的ASP.NET解决了这个问题，只要利用ASP.NET中关于图形显示的类，就可以画出丰富，动态的图表(如图1)。本文将要讲述如何利用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];

   file://通过输入参数，取得饼图中的总基数
   float sumData=0;
   foreach(DataRow dr in dt.Rows)
   {
   sumData +=Convert.ToSingle(dr[1]);
   }
   file://产生一个image对象，并由此产生一个Graphics对象
   Bitmap bm=new Bitmap(width,height);
   Graphics g=Graphics.FromImage(bm);
   file://设置对象g的属性
   g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH);
   g.SmoothingMode=SmoothingMode.Default;
   g.TextRenderingHint=TextRenderingHint.AntiAlias;

   file://画布和边的设定
   g.Clear(Color.White);
   g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1);
   file://画饼图标题
   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://画图例各项
   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://通过Response.OutputStream，将图形的内容发送到浏览器
   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://计算最高的点
   float highPoint=0;
   foreach(DataRow dr in dt.Rows)
   {
   if(highPoint<Convert.ToSingle(dr[1]))
   {
   highPoint=Convert.ToSingle(dr[1]);
   }
   }
   file://建立一个Graphics对象实例
   Bitmap bm=new Bitmap(width,height);
   Graphics g=Graphics.FromImage(bm);
   file://设置条图图形和文字属性
   g.ScaleTransform((Convert.ToSingle(width))/SIDE_LENGTH,(Convert.ToSingle(height))/SIDE_LENGTH);
   g.SmoothingMode=SmoothingMode.Default;
   g.TextRenderingHint=TextRenderingHint.AntiAlias;

   file://设定画布和边
   g.Clear(Color.White);
   g.DrawRectangle(Pens.Black,0,0,SIDE_LENGTH-1,SIDE_LENGTH-1);
   file://画大标题
   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 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://设置边
   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;//用于数据访问

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、最后回收资源。

至此画饼图的类就完成了。画条形图的方法和画饼图的方法大同小异，这里就不展开讲了。

总体看来，构建画图的类没有我们想象的那样难，并没有多么高深的算法。其实整体思路，就好像我们用笔在纸上画图是一摸一样的。关键是各个方法的使用和参数设置。

以上所分享的是关于ASP.NET画图全攻略（上），下面是编辑为你推荐的有价值的用户互动：

　　相关问题：如何在Word中画图，Word中画图技巧全攻略

　　答：你所谓的画图是画那些图，数学图形还是漫画？数学图形画其他的如何在Word中画图，Word中画图技巧全攻略 Word最为一款专业的文字处理排版软件，还可以用来画图。不仅方便，而且操作起来也非常简单。当然，也有很多人觉得用Word画图比较困难，... >>详细

　　相关问题：如何在Word中画图，Word中画图技巧全攻略

　　答：https://www.baidu.com/s?wd=Word%E4%B8%AD%E7%94%BB%E5%9B%BE%E6%8A%80%E5%B7%A7%E5%85%A8%E6%94%BB%E7%95%A5&tn=SE_hldp00800_iw44c7tx&ie=utf-8&hl_tag=flayer 这不是一两句话说清楚的,百度经验这里有详解! >>详细

　　相关问题：c# 我在学asp.net画图，在网上找了篇文章《ASP.NET...

　　答：1.画图不用连数据库。我觉得这句代码与画图应该无关 2.这SQL语句还是满简单的，但是如果你一点数据库知识都不懂这里无法讲解。 3.画图源码我有，需要的话忘采纳并留邮箱 >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

ASP.NET画图全攻略（上）

ASP.NET画图全攻略（上）

以上所分享的是关于ASP.NET画图全攻略（上），下面是编辑为你推荐的有价值的用户互动：

最新教程

相关教程