GDI＋实现统计图表控件
目录：<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
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);
}
总结：
上面提供了如何去绘制一个简单的数据图表，并且将其写成一个用户控件。同时里面提到如何去提供一个灵活的数据接口。虽然比较简单，但是还是值得我们去思考的。同时也存在一定的问题，比如标题的位置信息，以及图表视图中图例框的位置及信息都是相当的死板。还是希望读者能够加以改进。