.NET 的绘图控件ZedGraph

该控件来自于CodeProject

http://www.codeproject.com/KB/graphics/zedgraph.aspx

我大多的.NET程序的绘图程序都用的是这个控件。下面是这个控件的文档翻译及其基本使用方法。

A flexible charting library for .NET   By JChampion

• Download source files (.NET 1.1 and .NET 2.0)
• Download dll only (.NET 1.1 and .NET 2.0)
• Download C# Sample Project
• Download VB Sample Project
• Download the latest versions from SourceForge

一个灵活的.NET绘图库
Looking for a way to draw 2D line graphs with C#? Here's yet another charting class library with a high degree of configurability, that is also easy to use.

正在寻找利用C#画二维线型图像的方法吗？这个就是高度可配置的绘图类库，当然，他也是非常容易用的。 

 

Introduction

ZedGraph是一个类库，为Windows Forms 设计的用户控件,该控件可以通过专业的数据资料创建2D线、Bar和Pie图像。该类库提供高度的灵活性——几乎每一个图像的部分都能由用户修改。于此同时，通过为所有图像的属性提供缺省值使类库的用法保持简单。类库中包括选择合适的刻度因数范围和基于被显示值的的数据范围的步长值的代码。此外，ZedGraph 兼容于.NET 2.0和VS.NET 2005.

ZeGraph 是作为开源开发工程在SourceForge被维护的。该网站包括该项目的wiki、文档、更新历史和所有的发行版本。

Wiki上含有一套简单的图像实例由公开的代码完成（许多的例子包括C#和VB代码）。

Background

    我们可以寻找到很多的绘图类库，但是似乎没有一个能够满足我的需要。我发现MSCHART太诡异了，许多其他的选项都不具有可配置性但我需要达到一种精致的外观。当然，许多商业开发包能够做这种花招，但是我需要某种免费的东东。由此，ZedGraph产生了！

    这个类库将可以产生各种线型、条形、图形分割统计图表在Form上，考虑到位置矩形和一些数据点（翻译的有点诡异，没太看明白）。ZedGraph处理二维线形或散点图形，所彩的百分数条形图形，误差条形图像，日本烛台图形和图形分割统计图表——他现在还不能处理2.5D或3D表面图形。可以通过坐标轴标签、标题、图例标签、文字标签、箭头、镜像等对象修饰图像。

ZedGraphWiki 和online class documentation 提供了大量的有用的信息，针对其提供更多的信息，ZedGraph 有大量的选项没有在这个入门文档中提供。

Using ZedGraph as a UserControl 

将ZedGraph作为一个控件可由Visual Studio.NET的控件工具箱中获取。 要创建ZedGraph，首先要打开Visual Studio.NET，创建一个新的Forms项目。打开form设计器使其出现在当前窗口，如下图

右击工具箱->选择项

点击浏览定位到 zedgraph.dll文件，并添加。

一旦添加了此文件，你会看到ZedGraphControl选项在工具箱中。如下图

1. 在项目主菜单->选择添加引用->添加ZedGraph.dll，然后点击OK，重复这个过程添ZedGraph.Web.dll，这将包括所有的ZedGraph功能在你的工程中。

2. 添加using ZedGraph;语句到你的主Form代码中

3. 在Form设计器中，从工具箱中拖拽ZedGraphControl到From上，按照你的意愿修改其大小和位置。你现在在你的Form中就有了一个ZedGraph控件。如下图

4. 所有的ZedGraph功能都可以通过ZedGraphControl.MasterPane属性来访问，提供ZedGraphControl.GraphPane来引用第一个GraphPane在主MasterPane列表中。（下面会解释这句话的意思）。

5. 在Form设计器中双击Form（不是ZedGraphControl）。这将会放置一个Form1_Load()模板在你的代码文件中。

6. 在Form设计器中，激活Form后定位到属性中的事件如图，双击Resizes事件，这时Form1_Resize相应的函数模板将出现在在代码文件中。

7. 修改Form1_Load（）和Form1_Resize（）方法，按照下面的代码添加CreateGraph() and SetSize() 方法。（这里假定你的控件名称为zedGraphControl1）

8. //  form 'Resize'  的事件相应方法

   private void Form1_Resize( object sender, EventArgs e )
   { 
        SetSize();
   } 
   //SetSize() 是独立于Resize()的，所以我们能够独立的调用他通过Form1_Load() 方法。

   //这将保留10像素环绕控件的外部边缘，定制这些使之适合你的需要。
   private void SetSize()
   { 
        zedGraphControl1.Location = new Point( 10, 10 ); 

        //保留一个小的页面空白在控件的周围
        zedGraphControl1.Size = new Size( ClientRectangle.Width - 20, 
                                                        ClientRectangle.Height - 20 );
   } 
   
   // Load事件的相应函数
   private void Form1_Load( object sender, EventArgs e )
   { 
        // 装载图像 
        CreateGraph( zedGraphControl1 ); 

        //设定控件的大小填充form 
        SetSize();
   } 
   
   // 创建图像
   private void CreateGraph( ZedGraphControl zgc )
   { 

        //得到GraphPane的引用
        GraphPane myPane = zgc.GraphPane; 
    
        // 设置标题 
        myPane.Title.Text = "My Test Graph\n(For CodeProject Sample)"; 
        myPane.XAxis.Title.Text = "My X Axis"; 
        myPane.YAxis.Title.Text = "My Y Axis"; 
        //生成正弦函数的数据集合 
        double x, y1, y2; 
        PointPairList list1 = new PointPairList(); 
        PointPairList list2 = new PointPairList(); 
        for ( int i = 0; i < 36; i++ ) 
        { 
               x = (double)i + 5; 
               y1 = 1.5 + Math.Sin( (double)i * 0.2 ); 
               y2 = 3.0 * ( 1.5 + Math.Sin( (double)i * 0.2 ) ); 
               list1.Add( x, y1 ); 
               list2.Add( x, y2 ); 
        } 
        //用钻石符合形状生成红色的曲线和图例
        LineItem myCurve = myPane.AddCurve( "Porsche", 
                    list1, Color.Red, SymbolType.Diamond ); 
        //利用圆型的符号生成蓝色的曲线和图例
        LineItem myCurve2 = myPane.AddCurve( "Piper", 
                    list2, Color.Blue, SymbolType.Circle ); 
        //告诉ZedGraph 去重新描绘坐标轴当数据变化时
        zgc.AxisChange();
   }

9. 每次添加或改变数据的时候调用AxisChange()方法。这将告诉ZedGraph去重新计算坐标轴的范围，（注意：这是AxisChange（）的功能——你可以在任何你喜欢的时候调用这个方法，他会基于当前坐标点数据集合来更新坐标范围，如果你不希望坐标轴被重新调节，你也可以避免调用AxisChange()）

8. 执行效果

 Enhancing the graph

 

ZedGraph 允许你通过多种途径更改图形的属性，图像的每个部分都被打包成一个类结构体，这个结构体有可更改的属性去控制图形的输出。下面就是一些在ZedGraph中提供的类（注意这些类是XML文档，详细的细节中每个类请看ZedGraph documentation ）

 

Class	Description
MasterPane	这是一个管理多个GraphPane对象的类，继承于PaneBase。MasterPane类的应用是可选的，因为GraphPane类能够直接用于单个面板。提供布局、排列和单个GraphPane对象的管理的方法
GraphPane	图像的主要类，继承自PaneBase。包含所有其他的类作为属性。多用于控制图像面板的标题、窗框架和坐标轴框架、背景等属性。
XAxis, YAxis, Y2Axis	Axis类的子类。这些类包括了很多坐标轴显示的形式，包括：刻度、网格、颜色、画笔、字体、标签和类型。
Scale	通过Axis类声明的一个类实例。包括刻度范围、步长、格式和刻度的显示选项。由Linear, Log, Text, Date, Ordinal, Exponent, LinearAsOrdinal, and DateAsOrdinal scales的不同而不同。
Legend	此类为描述位置、字体、颜色等性质的类，用于绘制图例
CurveItem	一个对应单条曲线并包含数据的抽象基类。LineItem, BarItem, HiLowBarItem, ErrorBarItem, PieItem, StickItem, OHLCBarItem, and JapaneseCandleStickItem 都继承于此类。
CurveList	一个集合类维护了一个CurveItem的对象链表。在链表中的曲线的顺序控制着 Z-顺序为了绘图。在链表中最后的曲线将会出现在其她的曲线之后。
GraphObj	这是一个抽象的基类，他包含了多种的追加图像对象在一个分块中的位置信息。TextObj, ImageObj, LineObj, ArrowObj, EllipseObj, BoxObj, and PolyObj 都继承自GraphObj.
GraphObjList	一个维护GraphObj链表的集合类。
FontSpec	包括字体信息的功能类，主要是关于图像上字体的颜色、角度、大小、样式、框架和字体的背景填充。每一个包含字体信息的类将会包含一个或几个FontSpec的对象去相应的描述相关联的字体。
Fill	包括背景颜色特性的功能类。每一个含有色彩填充能力的对象都包含一个或多个Fill对象去相应的描述相关联的颜色填充。
Border	包括边框特性的功能类。每一个含有边框描述能力的对象都包含一个或多个Border对象去相应的描述相关联的边框线形和颜色。
Location	一个通用的类，此类处理图像对象在图形中的位置。
PointPair	一个封装了一对double型数据的数据结构，其表征了一个（x，y）的数据点，这是在每个CurveItem中值数组的内部的存储格式。
PointPairList	一个集合类维护了一个PointPair对象的数据链表。

 

 

XDate

此类封装了单独的数据时间值（Double）

通过访问上面的每一个类的属性来修改图像。例如，如果你包括下面的代码在你的CreateGraph()方法中， 放在前述的代码示例之后，输出图像将会相应的改变。

            // 改变标题的颜色

            myPane.Title.FontSpec.FontColor = Color.Green;

            //对图像添加灰色网格
            myPane.XAxis.MajorGrid.IsVisible = true;
            myPane.YAxis.MajorGrid.IsVisible = true;
            myPane.XAxis.MajorGrid.Color = Color.LightGray;
            myPane.YAxis.MajorGrid.Color = Color.LightGray;

            //改变图例的位置

            myPane.Legend.Position = ZedGraph.LegendPos.Bottom;

            //使两个曲线线性变细
            myCurve.Line.Width = 2.0F;
            myCurve2.Line.Width = 2.0F;

            //在曲线下填充区域
            myCurve.Line.Fill = new Fill(Color.White, Color.Red, 45F);
            myCurve2.Line.Fill = new Fill(Color.White, Color.Blue, 45F);

            //增加符号的大小然后填充其为白色

            myCurve.Symbol.Size = 8.0F;
            myCurve2.Symbol.Size = 8.0F;
            myCurve.Symbol.Fill = new Fill(Color.White);
            myCurve2.Symbol.Fill = new Fill(Color.White);

            //对坐标轴框架添加背景倾斜填充(其实就是坐标轴的背景图)

            // Add a background gradient fill to the axis frame
            myPane.Chart.Fill = new Fill(Color.White,
                Color.FromArgb(255, 255, 210), -45F);

            // 添加说明文字和箭头
            TextObj myText = new TextObj("Interesting\nPoint", 230F, 70F);
            myText.FontSpec.FontColor = Color.Red;
            myText.Location.AlignH = AlignH.Center;
            myText.Location.AlignV = AlignV.Top;
            myPane.GraphObjList.Add(myText);
            ArrowObj myArrow = new ArrowObj(Color.Red, 12F, 230F, 70F, 280F, 55F);
            myPane.GraphObjList.Add(myArrow);

最终的效果如下所示：