GDI＋实现统计图表控件

 

目录：

 

GDI+概述

数据图表绘制函数

数据图表用户控件

总结

 

摘要：

本文是在概述GDI+的基础上，简单的介绍如何绘制数据图表，并在此基础上将其做成一个用户控件。便于读者及用户的使用。

 

GDI+概述：

提到GDI+，我们不得不先提到一个大家都比较熟悉的概念GDI（Graphical Device Interface），GDI就像是加在操作系统和显卡之间的一个中间层。用来屏蔽不同的显卡给绘图带来的差异。有了它，用户只用调用专门的Windows API 函数来执行用户所要的绘图操作，而此时的GDI让你的不同的显卡去做你要做的事情。虽然GDI提供了相当方便的应用程序开发接口给开发者，但是它依然是基于过去比较老的Windows API版本，而且都是C语言风格的函数。所以使用起来就并不是太方便。

所谓GDI+呢，它就像一个位于GDI和你的应用程序之间的一个中间层。它提供了更加直观，基于继承的对象模型。尽管GDI+像GDI外面包裹的一层表皮，但是微软声称GDI+提供了新的特色并且有着一些性能上的提高。

数据图表绘制函数：

下面我先提供一个简单的绘制图表文件的函数：

        public void Render(string title,string subTitle,int width,int height,ChartData chartData,Graphics tempGraphics)

         {

              const int SIDE_LENGTH = 400;

              const int PIE_DIAMETER = 200;

              ChartData cd = chartData;

              float sumData = 0;

              for(int i=0;i<cd.DataName.Count;i++)

              {

                   sumData += float.Parse(cd.DataValue[i].ToString());

              }

              //产生一个image对象，并由此产生一个Graphics对象

              Bitmap bm = new Bitmap(width,height);

              Graphics g = tempGraphics;

              //设置对象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<cd.DataValue.Count;i++)

              {

                   curAngle = Convert.ToSingle(float.Parse(cd.DataValue[i].ToString())) / 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("Unique",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<cd.DataValue.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(float.Parse(cd.DataValue[i].ToString())) / sumData * 100;

                   g.DrawString(cd.DataName[i].ToString()+ " (" + percent.ToString("0") + "%)",new Font("Tahoma",10),Brushes.Black,textOrigin);

                   boxOrigin.Y += 15;

                   textOrigin.Y += 15;

              }

         }   

上述函数是绘制一个简单的饼型的数据视图，它的参数表中有Title是该图的标题信息。SubTitle是该图的副标题信息，同时后面两个为该图的尺寸信息Width和Height。接下来为提供给该数据视图的数据源ChartData，它是一个笔者必定义的一个类，专门用来提供给数据视图的数据源。后面将专门提到。最后就是一个Graphics对象，函数中的绘制操作都是针对这个Graphics来做的，同时这个函数是没有返回值的，但是这个外部传入的Graphics对象其实就相当一个返回值。

数据图表用户控件：

为了便于以后的重用，所以将其写成一个用户控件，然后再次使用时候只要像使用开发环境自带的那些控件一样，先将此用户控件注册到Visual Studio .net左则的工具箱选项卡中。然后你使用就可以将它托到你的界面上，同时你可以使用开发环境右边的属性诓来设置你相应的属性，比如上面提到的Title,SubTitle,DataSource等等。

    我们回顾上面提到的绘制函数中的数据源ChartData;在用户控件中我们将其设置为该用户控件DataChart的一个属性DataSource。在此我们为什么要自己写一个专门的类来存储数据，关键在于笔者设计时遇到的数据一般都是像(“星期一”,100)这样的数据对。当然由于我们绘制的是二维的数据图表，显然我们的有用数据都会像这样的模式。这就存在着如何提供更加优美的数据接口的问题。当然你可以就用一个DataTable，但是这样就会给我们测试或者用户的使用带来灵活性的局限，特别是当你要临时添加或者删除一个数据对的时候。同时也会让我们上面的这个绘制函数显的不直观。当然你也可以用其他的数据源方式，我们在此用了自己设计的一个类如下：

#region 图表数据源类型

     public class ChartData

     {

         #region 字段和属性

         private ArrayList dataName;

         private ArrayList dataValue;

         public ArrayList DataName

         {

              get{return dataName;}

              set{dataValue = value;}

         }

         public ArrayList DataValue

         {

              get{return dataValue;}

              set{dataValue = value;}

         }

         #endregion

 

         #region 公开的构造函数和方法

         //无参数构造函数

         public ChartData()

         {

              dataName = new ArrayList();

              dataValue = new ArrayList();

         }

         //参数为两个ArrayList构造函数

         public ChartData(ArrayList tempDataName,ArrayList tempDataValue)

         {

              dataName = tempDataName;

              dataValue = tempDataValue;

         }

         //参数为一个DataTable构造函数

         public ChartData(DataTable tempData)

         {

              DataTable dt = tempData;

              foreach(DataRow dr in dt.Rows)

              {

                   this.dataName.Add(dr[0].ToString());

                   this.dataValue.Add(dr[1].ToString());

              }

         }

         public void Add(string tempName, float tempValue)

         {

              dataName.Add(tempName);

              dataValue.Add(tempValue);

         }

         //Remove 方法存在很大的问题，就是不能够知道ArrayList中是否存在当前的变量。导致无法得知操作结果

         //我使用了binarySearch，不知道可不可以实现功能

         public bool Remove(string tempName,float tempValue)

         {

              if(dataName.BinarySearch(tempName) > 0 && dataValue.BinarySearch(tempValue) > 0)

              {

                   dataName.Remove(tempName);

                   dataValue.Remove(tempValue);

                   return true;

              }

              else

              {

                   return false;

              }

         }

         #endregion

     }

     #endregion

在这个数据类中定义了两个ArrayList分别来存储我们有用的数据对，同时提供了三种不同的构造函数来提供多样话的数据接口，如果你只是为了测试这个用户控件、或者你是一个小型的应用程序你的数据来源于非数据库的方式。你可以使用无参数或者是提供两个ArrayList参数的构造函数，这样你可以通过Add方法来添加你的数据对，同时也可以使用Remove方法来删除你不需要的数据对。当然如果你的数据来源于一个数据库。你也可以使用提供一个DataTable参数的构造函数。

接下来就是提供几个属性用来设置用户控件的相应参数，比如前面提到的Title,SubTitle,DataSource以及Height,Width.让用户根据自己的需要去定制这些参数。同时我们复写OnPaint方法来绘制我们的用户控件的区域。

protected override void OnPaint(PaintEventArgs e)

         {

              Graphics gr = e.Graphics;  

              PieChart pc = new PieChart();            

              pc.Render(this.Title,this.SubTitle,this.ChartWidth,this.ChartHeight,this.DataSource,gr);          base.OnPaint(e);

         }

总结：

上面提供了如何去绘制一个简单的数据图表，并且将其写成一个用户控件。同时里面提到如何去提供一个灵活的数据接口。虽然比较简单，但是还是值得我们去思考的。同时也存在一定的问题，比如标题的位置信息，以及图表视图中图例框的位置及信息都是相当的死板。还是希望读者能够加以改进。