ZedGraph控件属性及基础教程详解.doc

ZedGraph 属性及基础教程ZedGraph控件属性设置ZedGraph是一个非常优秀的开源的作图控件ZedGraph来源：/project/showfiles.php?group_id=114675ZedGraph相关例子资源：/wiki/index.php?title=Sample_Graphs1、在vs中使用ZedGraph2、 基本一些概念几个注意点：图片的保存路径设置：RenderedImagePath属性中设置，程序对该文件夹应该是有写和修改权限的图片的输出格式：OutputFormat属性中设置，Png的推荐，比较清晰。Chart ChartBorder 图表区域的边框设置 ChartFill 图表区域的背景填充 Legend 图表的注释标签显示设置项目，一组数据对应一种颜色的注释 IsHStack 当有多个显示项的时候设置Y轴数据是叠加的还是分开的 Xaxis 图表区域的X轴相关信息设置 AxisColor 坐标轴颜色 Cross 坐标的原点，可以设置坐标的偏移程度 CrossAuto 原点自动设置：True的话Cross的设置就无效了。 FontSpec X轴标题字体相关信息 Angle X轴标题字体显示时候的角度，0为水平 90为垂直 Fill X轴标题字体填充信息 ColorOpacity 透明度 IsScaled 设置X轴标题字体显示大小是否根据图的比例放大缩小 RangeMax 填充时候的最大倾斜度（有过渡色，没试过） RangeMin 填充时候的最小倾斜度（有过渡色，没试过） StringAlignment X轴标题字体排列（不清楚，没试过） IsOmitMag 是否显示指数幂（10次方，没试过，似乎与IsUseTenPower有关系） IsPreventLabelOverlap 坐标值显示是否允许重叠，如果False的话，控件会根据坐标值长度自动消除部分坐标值的显示状态 IsShowTitle X轴标题是否显示 IsTicsBetweenLabels 两个坐标值之间是否自动显示分隔标志 IsUseTenPower 是否使用10次幂指数 IsVisible 是否显示X轴 IsZeroLine 当数据为0时候是否显示（在饼状图显示的时候有用） MajorGrid 大跨度的X轴表格虚线线显示信息 DashOff 虚线中孔间距 DashOn 虚线单位长度 MajorTic 大跨度的X轴刻度信息 IsInside 在Chart内部是否显示 IsOutSide 在Chart外部是否显示 IsOpposite 在对面的轴上是否显示 MinorGrid 小跨度的X轴表格虚线显示信息 MinorTic 小跨度的x轴刻度信息 MinSpace 刻度和轴之间的距离（没试过） Scale 刻度值的一些设定 IsReverse X轴的刻度值从高到低还是从低到高 MajorStep 大刻度步长 MajorStepAuto 是否自动设置大刻度步长 MajorUnit 大刻度步长单位 Max 刻度最大值 MaxAuto 根据输入数据自动设置刻度最大值 Min 刻度最小值 MinAuto 根据输入数据自动设置刻度最小值 MinGrace 不清楚，没试过 MinorStep 小刻度步长 MinorStepAuto 是否自动设置小刻度步长 MinorUnit 小刻度单位 Type 数据显示方式 Liner直接现实（自动） Date按日期方式显示 Log 按指数幂方式显示 Ordinal顺序显示 Y2Axis 第二个Y轴坐标信息显示（具体设置看X轴） Yaxis 第一个Y轴坐标信息显示（具体设置看X轴）GraphPane BarBase 在生成柱状图的时候设置柱状是基于X轴还是其他轴 BarType 柱状的类型叠加或其他。 IsFontsScaled 图比例变化时候图表上的文字是否跟着自动缩放 IsIgnoreInitial 是否忽略初始值 IsIgnoreMissing 是否忽略缺省值 IsPenWidthScaled 图比例变化时候图表上的画笔的粗细是否跟着自动缩放 IsShowTitle 图表标题是否显示 PaneFill Pane的一些填充信息MasterPane BaseDimension 缩放比例基数（可以试试效果） 数据 未测试过。不知道如何和数据库绑定外观 IsImageMap 不清楚干吗用的行为 AxisChaneged 是否允许自动绘图（没试过，一般都true，动态绘图） CacheDuration Cache保存时间0 OutputFormat 输出格式 RenderedImagePath 输出路径 RenderMode 输出模式，不太清楚一般都是ImageTag，另一个输出的是乱码不是图片对于图表而言，一般是三种表现形式：柱状图、饼状图和点线图。基本教程篇-第一节：InitialSampleDemo.cs介绍为了讲解方便，我先附上源代码和效果图。代码如下：using System;using System.Drawing;using System.Collections;using ZedGraph;namespace ZedGraph.Demo / / Summary description for SimpleDemo. / public class InitialSampleDemo : DemoBase public InitialSampleDemo() : base( Code Project Initial Sample,Initial Sample, DemoType.Tutorial ) GraphPane myPane = base.GraphPane; / Set the title and axis labels myPane.Title = My Test Graphn(For CodeProject Sample); myPane.XAxis.Title = My X Axis; myPane.YAxis.Title = My Y Axis; / Make up some data arrays based on the Sine function PointPairList list1 = new PointPairList(); PointPairList list2 = new PointPairList(); for ( int i=0; i36; i+ ) double x = (double) i + 5; double y1 = 1.5 + Math.Sin( (double) i * 0.2 ); double y2 = 3.0 * ( 1.5 + Math.Sin( (double) i * 0.2 ) ); list1.Add( x, y1 ); list2.Add( x, y2 ); / Generate a red curve with diamond / symbols, and Porsche in the legend LineItem myCurve = myPane.AddCurve( Porsche,list1, Color.Red, SymbolType.Diamond ); / Generate a blue curve with circle / symbols, and Piper in the legend LineItem myCurve2 = myPane.AddCurve( Piper,list2, Color.Blue, SymbolType.Circle ); base.ZedGraphControl.AxisChange(); 我们可以看到，InitialSampleDemo继承自CemoBase类，而DemoBase又继承自ZedGraphDemo这个接口。ZedGraphDemo接口定义了String Description、String Title、ZedGraph. ZedGraphControl ZedGraphControl 和 System.Collection.ICollection Types这四个属性。DemoBase除了实现这四个属性外，还添加了PaneBase Pane和MasterPane MasterPane这两个属性，此外DemoBase还实现了多载构造函数。关于各个类的具体含义和用法，我会在以后的篇幅中陆续介绍。这里只是给大家一个整体的大致结构。 下面进行对代码的分析，由于这是第一个例子，所有我会讲得比较细，以后的例子就不会了。 我们可以看到程序首先public InitialSampleDemo() : base( Code Project Initial Sample ,Initial Sample, DemoType.Tutorial )初始化基类的构造函数。基类重载了四个构造函数public DemoBase( string description, string title, DemoType type ) ArrayList types = new ArrayList(); types.Add( type ); Init( description, title, types ); public DemoBase( string description, string title, DemoType type, DemoType type2 ) ArrayList types = new ArrayList(); types.Add( type ); types.Add( type2 ); Init( description, title, types ); public DemoBase( string description, string title, ICollection types ) Init( description, title, types ); private void Init( string description, string title, ICollection types ) this.description = description; this.title = title; this.types = types; control = new ZedGraphControl(); 函数中的变量含义如下：Description:对此结构的描述。Title:在树形结构(TreeView)中显示的标题。Types:要把此类显示在哪个树形结构的区域中。若有多个Types，则把此类分入不同的树形区域中。例如MasterPane Sample在Tutorial Sample和 Special Features两个区域都有。见图中的相应区域标注。myPane.Title = My Test Graphn(For CodeProject Sample); myPane.XAxis.Title = My X Axis; myPane.YAxis.Title = My Y Axis; 分别指定这个Pane的title、XAxis和YAxis的标题。见上图。PointPairList list1 = new PointPairList(); PointPairList list2 = new PointPairList(); for ( int i=0; i36; i+ ) double x = (double) i + 5; double y1 = 1.5 + Math.Sin( (double) i * 0.2 ); double y2 = 3.0 * ( 1.5 + Math.Sin( (double) i * 0.2 ) ); list1.Add( x, y1 ); list2.Add( x, y2 ); PointPairList类是一个集合类，继承自System.Object System.Collections.CollectionBaseZedGraph.CollectionPlus它是PointPair对象的集合，PointPair类是一个包含(X,Y)的坐标类。其中的for循环在为两个PointPairList复值。LineItem myCurve = myPane.AddCurve( Porsche, list1, Color.Red, SymbolType.Diamond );LineItem类是ZedGraph中的线条类.myPane.AddCurve( Porsche, list1, Color.Red, SymbolType.Diamond );的意思是将刚刚赋值的list以”Porsche”这个名字以红色和水晶形状画到Pane中，这个函数的返回值是一个LineItem。你可以通过myCurve这个变量来对它进行进一步的设定。其中SymbolType是个Enum，它枚举了12个可供使用的形状最后一步就是刷新了。base.ZedGraphControl.AxisChange();这样整个程序就完成了，简单吧，其实这是个简单的应该，以后会介绍更加复杂的用法和类库。基本教程篇-第二节：ModInitialSampleDemo.cs介绍为了讲解方便，我先附上源代码和效果图。代码如下：using System;using System.Drawing;using System.Collections;using ZedGraph;namespace ZedGraph.Demo / / Summary description for SimpleDemo. / public class ModInitialSampleDemo : DemoBase public ModInitialSampleDemo() : base( Code Project Modified Initial Sample, Modified Initial Sample, DemoType.Tutorial ) GraphPane myPane = base.GraphPane; / Set up the title and axis labels myPane.Title = My Test Graphn(For CodeProject Sample); myPane.XAxis.Title = My X Axis; myPane.YAxis.Title = My Y Axis; / Make up some data arrays based on the Sine function PointPairList list1 = new PointPairList(); PointPairList list2 = new PointPairList(); for ( int i=0; i36; i+ ) double x = (double) i + 5; double y1 = 1.5 + Math.Sin( (double) i * 0.2 ); double y2 = 3.0 * ( 1.5 + Math.Sin( (double) i * 0.2 ) ); list1.Add( x, y1 ); list2.Add( x, y2 ); / Generate a red curve with diamond / symbols, and Porsche in the legend LineItem myCurve = myPane.AddCurve( Porsche,list1, Color.Red, SymbolType.Diamond ); / Generate a blue curve with circle / symbols, and Piper in the legend LineItem myCurve2 = myPane.AddCurve( Piper,list2, Color.Blue, SymbolType.Circle ); / Change the color of the title myPane.FontSpec.FontColor = Color.Green; / Add gridlines to the plot, and make them gray myPane.XAxis.IsShowGrid = true; myPane.YAxis.IsShowGrid = true; myPane.XAxis.GridColor = Color.LightGray; myPane.YAxis.GridColor = Color.LightGray; / Move the legend location base.Pane.Legend.Position = ZedGraph.LegendPos.Bottom; / Make both curves thicker myCurve.Line.Width = 2.0F; myCurve2.Line.Width = 2.0F; / Fill the area under the curves myCurve.Line.Fill = new Fill( Color.White, Color.Red, 45F ); myCurve2.Line.Fill = new Fill( Color.White, Color.Blue, 45F ); / Increase the symbol sizes, and fill them with solid white myCurve.Symbol.Size = 8.0F; myCurve2.Symbol.Size = 8.0F; myCurve.Symbol.Fill = new Fill( Color.Red ); myCurve2.Symbol.Fill = new Fill( Color.White ); / Add a background gradient fill to the axis frame myPane.AxisFill = new Fill( Color.White, Color.FromArgb( 255, 255, 210), -45F ); / Add a caption and an arrow TextItem myText = new TextItem( InterestingnPoint, 23F, 7F ); myText.FontSpec.FontColor = Color.Red; myText.Location.AlignH = AlignH.Center; myText.Location.AlignV = AlignV.Top; myPane.GraphItemList.Add( myText ); ArrowItem myArrow = new ArrowItem( Color.Red, 12F, 7F, 5F, 20F, 8F ); myPane.GraphItemList.Add( myArrow ); base.ZedGraphControl.AxisChange(); 我们可以看到，这个例子和第一节中的例子大部分都相同，我在这只讲它们不同的地方，和不好懂的地方。 和第一节的图相比，本节的图在Pane上添加了Grid的显示，其功能要归功于如下代码： myPane.XAxis.IsShowGrid = true; myPane.YAxis.IsShowGrid = true; myPane.XAxis.GridColor = Color.LightGray; myPane.YAxis.GridColor = Color.LightGray;代码一目了然，我就不用多解释什么了，要说的是注意在ZedGraph中，很多都是有缺省值的，IsShowGrid的缺省值就是false，所以第一节中没有对此项进行设置就没有显示Grid。上节我就已经说过LineItem myCurve = myPane.AddCurve( Porsche,list1, Color.Red, SymbolType.Diamond );myCurve接收myPane.AddCurve的返回值后就可以对里面的线图作近一步的描述，myCurve.Line.Width = 2.0F;、myCurve.Line.Fill = new Fill( Color.White, Color.Red, 45F ); 和myCurve.Symbol.Fill = new Fill( Color.Red );就是其中的三个应用，一个是Line的宽度，第二个表示Line要填充下面的区域，以45度角从左到右从白到红的填充，第三个表示线图上的符号被填充成什么颜色的。效果见下图：关于Legend的类请见下图：base.Pane.Legend.Position = ZedGraph.LegendPos.Bottom;就是显示Pane中的图形的名字，它里面也有很多属性和方法，如果大家写上base.Pane.Legend.IsVisible = false ;那么就可以隐藏图形的名字。TextItem类的主要方法是在Pane中显示一个textbox的文本框，见上图ArrowItem类的主要方法是在Pane上显示一个箭头，ArrowItem myArrow = new ArrowItem( Color.Red, 12F, 7F, 5F, 20F, 8F );构造函数的参数含义分别为颜色，箭头的大小，箭头的起始(x,y)，终止(x,y)。基本教程篇-第三节、第四节DateAxisSampleDemo.cs和TextAxisSampleDemo.cs介绍 由于这两个例子很简单也很相似，所以决定还是放到一起来写。按照惯例还是先给出代码和图示。代码如下：DateAxisSampleDemo:using System;using System.Drawing;using System.Collections;using ZedGraph;namespace ZedGraph.Demo / / Summary description for SimpleDemo. / public class DateAxisSampleDemo : DemoBase public DateAxisSampleDemo() : base( Code Project Date Axis Sample,Date Axis Sample, DemoType.Tutorial ) GraphPane myPane = base.GraphPane; / Set the titles and axis labels myPane.Title = My Test Date Graph; myPane.XAxis.Title = Date; myPane.YAxis.Title = My Y Axis; / Make up some data points based on the Sine function PointPairList list = new PointPairList(); for ( int i=0; i36; i+ ) double x = (double) new XDate( 1995, 5, i+11 ); double y = Math.Sin( (double) i * Math.PI / 15.0 ); list.Add( x, y ); / Generate a red curve with diamond / symbols, and My Curve in the legend LineItem myCurve = myPane.AddCurve( My Curve, list, Color.Red, SymbolType.Diamond ); / Set the XAxis to date type myPane.XAxis.Type = AxisType.Date; base.ZedGraphControl.AxisChange(); TextAxisSampleDemo:using System;using System.Drawing;using System.Collections;using ZedGraph;namespace ZedGraph.Demo / / Summary description for SimpleDemo. / public class TextAxisSampleDemo : DemoBase public TextAxisSampleDemo() : base( Code Project Text Axis Sample,Text Axis Sample, DemoType.Tutorial ) GraphPane myPane = base.GraphPane; / Set the title and axis labels myPane.Title = My Test Date Graph; myPane.XAxis.Title = Label; myPane.YAxis.Title = My Y Axis; / Make up some data points string labels = USA, SpainnMadrid, Qatar, Morocco, UK, Uganda, Cambodia, Malaysia, Australia, Ecuador ; double y = new double10; for ( int i=0; i10; i+ ) yi = Math.Sin( (double) i * Math.PI / 2.0 ); / Generate a red curve with diamond / symbols, and My Curve in the legend LineItem myCurve = myPane.AddCurve( My Curve,null, y, Color.Red, SymbolType.Diamond ); /Make the curve smooth myCurve.Line.IsSmooth = true; / Set the XAxis to Text type myPane.XAxis.Type = AxisType.Text; / Set the XAxis labels myPane.XAxis.TextLabels = labels; / Set the labels at an angle so they dont overlap myPane.XAxis.ScaleFontSpec.Angle = 40; base.ZedGraphControl.AxisChange(); 看到前两节的介绍，这里的代码就应该很简单了，我要说的只有两个类XDate和TextLabel这个属性。首先XDate就相当于msdn中的DateTime这个类，是个时间日期类，也是具有多个构造函数，XDate( 1995, 5, i+11 )是按年月日来初始化的。第二个就是TextLabel属性，它主要是把Label的内容显示在Pane上。如TextAxisSampleDemo的X轴。基本教程篇-第五节BarChartSampleDemo.cs介绍 从这节开始，我们将进入柱形图的研究(如下图)，首先从最简单的BarChartSampleDemo开始，我们一步一步进入ZedGraph的柱形世界。代码如下：using System;using System.Drawing;using System.Collections;using ZedGraph;namespace ZedGraph.Demo / / Summary description for SimpleDemo. / public class BarChartSampleDemo : DemoBase public BarChartSampleDemo() : base( Code Project Bar Chart Sample,Bar Chart Sample, DemoType.Tutorial ) GraphPane myPane = base.GraphPane; / Set the titles and axis