DOI:10.16184/j.cnki.comprg.2009.12.

026

DATABASE AND INFORMATION MANAGEMENT 数据库和信息管理

应用 Zedgraph 高效开发数据图表
朱亦钢
（北京航空材料研究院材料数据中心，北京 100095）

摘 要： 在软件的用户介面上应用图表，可以直观地反映数据的走势。对基于.NET 平台开发的软件，开源 Zed－

graph 类库提供了一种高效实现数据图形的方法。Zedgraph 既可以用于 Windows 客户应用程序的开发，也可以在
Web 页中显示数据图形。由于代码是开源的，具有极大的灵活性。本文根据网络资源，系统介绍这一类库和类库的
使用，从下载安装过程到分别在客户端程序和 Web 程序中的使用方法以及软件使用中的一些经验和要点，通过案例
的实施，为快速掌握 Zedgraph 的应用技术，提供了简捷的过程。
关键词： 图表；Zedgraph；C# .NET；用户界面；开源软件

Application of Zedgraph in Rapid Develop Graphic Chart

ZHU Yigang
(Beijing Institute of Aeronautical Materials, Beijing 100095)

Abstract: Graphic chart is an effective method to let the user easy and rapid understands the tendency of data. For the soft－
ware based on .Net framework, Zedgraph class library is a practical tool to rapid develop graphic chart. This library can be
used in either windows or Web program. Due to the source code opened, it is flexible in use. This paper describes the usage
of the software according to public material from internet and the experience in using. From the download and installation
methods to the use in different cases and its technique notes, the samples in paper demonstrate the using of Zedgraph step
by step.
Key words: chart; Zedgraph; C#.NET; UI; open source

1 引言 计时拖放图形化的控件到窗体中。以下步骤通过实例叙述在
图表是对数据进行分析评估的常用工具，也是最直观的 Windows 程序开发中的设计时使用，代码源自 ZedGraph Wiki
表示数据的方法。用户界面中使用适当的图表来表现数据， 网页资源，做了部分修改，此处使用的是版本 5.0.10 的类库，
可提高软件的性能和数据的可读性，数据库查询和数据分析 对应于 VS.NET 2005 开发平台。
中采用图表代替数据列表，能带给用户快速直观的判断，例
如股票 K 线均线和成交变化的走势图。许多专用数据分析软
件如 Excel、Origin 等都具有图形报表功能，但在软件开发项
目中需要动态图形表示时，集成使用这些专业分析软件或绘
图软件，经常遇到一定的条件限制。从头编写 GDI 虽然理论
上完全可以实现，但无疑是低效率的方法。从开源代码中，
应用 Zedgraph 是在.NET 平台开发图表界面的不错选择。
Zedgraph 是一个比较新的开源类库，使用 C# 语言编写，
用来创建基于任意数据集的多种二维图形图像。类库编写是
面向对象的，在编程使用时有着很强的灵活性，开发者可以
修改并覆盖几乎所有图表特性的默认值，包括数值范围、数
图 1 Zedgraph 的多种类型图表
值单位、步长等。由于是开源代码，必要时还可以对源代码
进行修改，重新生成。类库允许在一张图表中显示多个数值 （1） 打开 Visual Studio 2005 中文版。
范围、多种单位以及多个坐标轴。图 1 是 Zedgraph 设计时应 （2） 从“文件”菜单中选择“新建”“项目…”。
用的控件默认显示，其中包含堆叠的柱状图、透明的覆盖图 （3） 选择“Windows 应用程序”，取名为“ZedGraphSam－
以及填充图的图表，还包含了图例和注释。 ple”。
2 应用方法 （4） 在解决方案浏览窗口上，右键点击 “引用”选择
2.1 Windows 应用程序 “添加引用…”。
Zedgraph 的使用可以在运行时实例化对象，也可以在设 （5） 选择“浏览”标签，导航到 ZedGraph.dll，点击“确
定”。可看到项目引用中增加了 ZedGraph。
本文收稿日期：2009-2-28

- 59 -
 电脑编程技巧与维护

（6） 在“视图”菜单中选择“工具箱”，拉至工具箱底部 选择复制和保存图像的操作。

看“常规”选项卡的内容。
（7） 如果“ZedGraphControl”选项不存在，右键点击“常
规”选项卡并点选“选择项…”。
（8） 在“.Net Framework 组件”标签下点击“浏览 (B)
…”。
（9） 导航到 ZedGraph.dll 文件，点击“打开”，之后点击
“确定”。
（10） 工具箱中点击“ZedGraphControl”控件，再点窗体
中的放置地点，或拖放控件到窗体。实际上工具箱中的控件
拖放到窗体时，类库的引用自动添加，所以在设计时应用的
情况下，之前的添加引用过程可以省略。
（11） 窗体中点选“ZedGraphControl”控件，视图菜单中
选择“属性窗口”。 图 2 ZedGraph 曲线图
（12） 把 ZedGraphControl 的 名 称 “ ( Name) ” 项 填 写 成 图形设置放在 CreateGraph () 方法中，为的是方便之后可
“zg1”，默认通常是“zedGraphControl1”
。 能的重复使用。在此处对控件对象进行了定制、准备数据和
（13） 双击窗体 （不是控件） 切换到代码窗口，窗口模板 外观设计，结合开发环境的智能感知功能，可以尝试各种各
中带有 Form1_Load () 方法。 样的图形样式和风格。
（14） 在文件上部加上“using ZedGraph;”。 2.2 在 Web 程序中的使用
将下面的 CreateGraph () 函数加到窗体类代码的 Form1 类 Zedgraph 用于 Web 时有两种绘制模式 （RenderMode），即
定义中。 图像标识 （ImageTag） 模式和原图 （RawImage） 模式。图像标
private void CreateGraph ( ZedGraphControl zgc ) 识方式是默认的方式，可以把图形控件与其他内容混排在网
{ 页文件中，但需要在网站中指定一个缓冲路径，默认路径是
GraphPane myPane = zgc.GraphPane;
工作网站目录下的“ZedGraphImages”，即使是默认的也不会
myPane.Title.Text = " My Test Date Graph" ;
myPane.XAxis.Title.Text = " X Value" ; 自动产生，需要手工创建文件夹；采用原图模式不需要缓冲
myPane.YAxis.Title.Text = " My Y Axis" ; 路径，但图形控件需要独占一个 aspx 文件，在控件之前不可
PointPairList list = new PointPairList () ; 以有其他显示内容，否则会发生冲突而不显示。
for ( double x = 0; x < 36; x++ ) 2.2.1 RenderMode. ImageTag 模式
{ 下面的案例描述使用图像标识模式的过程。通过新建网
double y = Math.Sin ( x * Math.PI / 15.0 ) ;
站首先产生下面列出的前两个页面文件和后台编码文件，之
list.Add ( x, y ) ;
} 后在 ASP.NET 类型文件夹 bin 中放入 ZedGraph.dll 和 Zed－
LineItem myCurve = myPane.AddCurve ( " My Curve" , Graph.Web.dll 库文件，再建一个缓存用的普遍文件夹 取 名
list, Color.Blue， “ZedGraphImages”，下面是创建后的文件列表：
SymbolType.Circle ) ; Default.aspx
myCurve.Line.Fill = new Fill ( Color.White, Color.Red, Default.aspx.cs
45F ) ; Bin/ZedGraph.dll
myCurve.Symbol.Fill = new Fill ( Color.White ) ; Bin/ZedGraph.Web.dll
myPane.Chart.Fill = new Fill ( Color.White, Color.Light－ ZedGraphImages/
GoldenrodYellow, 45F ) ;
注意 ZedGraphImages 目录必须是 Web 用户可写的。虽然
myPane.Fill = new Fill ( Color.White, Color.FromArgb
默认文件夹是 ZedGraphImages，但也可在控件属性中指定其它
(220, 220, 255) , 45F ) ;
zgc.AxisChange () ; 文件夹。同样 CacheDuration 属性指定了图像缓存的有效的秒
} 数。图像标识模式是默认模式，ImageTag 不需要显式设定，
在窗体装载事件的方法 Form1_Load 中调用上面的 Create－ 在浏览器中实现图 3 所示的图像。
Graph () 函数。 首 先 在 新 建 Web 页 面 “ Default.aspx” 中 放 置 一 个 的
private void Form1_Load (object sender, EventArgs e) “ ZedGraphWeb” 控 件 ， ImageTag 是 默 认 模 式 。 如 果 这 时
{ “ZedGraphWeb”控件不在工具箱中，可按 2.1 中的方法，通
CreateGraph (zg1) ; 过导航到 ZedGraph.Web.dll 文件将其添加进工具箱。Web 窗体
}
中选择“ZedGraphWeb”控件后在其属性页选择事件图标，双
运行程序得到窗体中图 2 所示的图形，右键点击图形可

- 60 -
DATABASE AND INFORMATION MANAGEMENT 数据库和信息管理

击 “ RenderGraph” 产 生 事 件 函 数 ZedGraphWeb1_Render－ myCurve.Bar.Fill = new Fill (Color.Red, Color.White,

Graph。查看生成的脚本代码如下 （只更改了页标题）： Color.Red, 90f) ;
myCurve = myPane.AddBar ( " There" , x2, null,
Color.Blue) ;
myCurve.Bar.Fill = new Fill (Color.Blue, Color.White,
Color.Blue, 90f) ;
myCurve = myPane.AddBar (" Elsewhere" , x3, null,
Color.Green) ;
myCurve.Bar.Fill = new Fill ( Color.Green, Color.
White, Color.Green, 90f) ;
myPane.YAxis.MajorTic.IsBetweenLabels = true;
myPane.YAxis.Scale.TextLabels = labels;
myPane.YAxis.Type = AxisType.Text;
图 3 ZedGraph 堆叠的柱状图 myPane.BarSettings.Type = BarType.Stack;
myPane.BarSettings.Base = BarBase.Y;
<% @ Page Language = " C#" AutoEventWireup = " true" myPane.Chart.Fill = new Fill (Color.White,
CodeFile=" Default.aspx.cs" Inherits=" _Default" %> Color.FromArgb (255, 255, 166) , 45.0F) ;
<%@ Register Assembly=" ZedGraph.Web" Namespace=" pane.AxisChange (g) ;
ZedGraph.Web" TagPrefix=" cc1" %> }
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 }
Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/ 案例的图形来自 ZedGraphWiki，为节省篇幅和简化程序，
xhtml1-transitional.dtd" > 这里采用 VS.NET 2005 网站的设计时方法，并去掉了注释部
<html xmlns=" http://www.w3.org/1999/xhtml" >
分。
<head runat=" server" >
<title>应用 ImageTag 模式</title> 在任何时候添加或改变数据都通过调用 AxisChange () 函
</head> 数来更新图形。这个函数告诉 Zedgraph 重新计算数据轴的范
<body> 围。AxisChange () 可以在任何时候调用，它根据当时的数据
<form id=" form1" runat=" server" > 点对坐标轴范围进行更新，如果不想改变轴的比例，则应避
<cc1:ZedGraphWeb ID=" ZedGraphWeb1" runat=" serv－
免调用此函数。
er" OnRenderGraph=" ZedGraphWeb1_RenderGraph" />
2.2.2 RenderMode. RawImage 模式
</form>
</body> 采用原图模式时，有图形的.aspx 文件是作为 img 元素的
</html> 源。.aspx 文件中只能有一个 ZedGraphWeb 控件，在它前面存
再修改产生图像的后台代码文件 Default.aspx.cs，为文件 在其他元素时，图形将不显示。下例说明如何使用原图模式
中的画图函数添加画图语句： 进 行 Web 页 中 的 画 图 。 案 例 中 是 在 一 般 的 html 页 中 添 加
using System; RawImage 模式的 ZedGraphWeb 图形，它是.aspx 文件的形式。
using System.Drawing; 实现这一过程，需要参照前面的方法在网站中构建以下的 3
using ZedGraph; 个页面文件和 bin 目录下的库文件：
public partial class _Default : System.Web.UI.Page
StartPage.html
{
Default.aspx
protected void ZedGraphWeb1_RenderGraph (ZedGraph.
Default.aspx.cs
Web.ZedGraphWeb webObject, System.Drawing.Graphics g,
bin/zedgraph.dll
ZedGraph.MasterPane pane)
bin/zedgraph.web.dll
{
StartPage 是一个 html 文件，采用 aspx 文件也是可以的，
GraphPane myPane = pane [0] ;
myPane.Title.Text = " Cat Stats" ; 只是这里不需要编写后台代码。在项目中将其设为起始页
myPane.YAxis.Title.Text = " Big Cats" ; （管理器中右键点击文件名可设定，通常 Default 是起始页），
myPane.XAxis.Title.Text = " Population" ; 下面是页中的代码：
string [] labels = { " Panther" , " Lion" , " Chee－ <head>
tah" , " Cougar" , " Tiger" , " Leopard" } ; <title>使用 RawImage 模式</title>
double [] x = { 100, 115, 75, 22, 98, 40 } ; </head>
double [] x2 = { 120, 175, 95, 57, 113, 110 } ; <body>
double [] x3 = { 204, 192, 119, 80, 134, 156 } ; <img src=" Default.aspx" />
BarItem myCurve = myPane.AddBar ( " Here" , x, </body>
null, Color.Red) ; </html>
（下转到 124 页）

- 61 -
 电脑编程技巧与维护

（2） 采用 JavaScript 进行客户信息的完整性和正确性验证。 义和实用价值。

（3） 使用 ADO.NET 技术。
参考文献
（4） 数据库的动态访问。
[1] Christian Nagel 著. .NET 企业服务框架. 电子工业出版社.
（5） 基于 Internet 的 B/S 模式。
[2] Christian Nagel. C# 高级编程. 清华大学出版社.
4 结语
[3] 李德奇. ASP.NET 程序设计. 人民邮电出版社.
阐述了基于目前最流行的 B/S 模式教学反馈系统的设计思
想和设计方案，详细阐述了各子模块系统的设计策略，较为 作者简介
全面地反映了网络环境的非实时交互和实时交互的教学模式 肖玉朝，男 （1974-），高校讲师，在读研究生，研究方向：
及其管理。这对正在进行的网络教学的资源建设有重大的意 计算机应用与计算机软件工程：

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

（上接第 61 页） 像产生方式，对使用中的要点作了说明。
下一步修改项目生成的 Default.aspx 页，在设计方式中添
表 1 Zedgraph 使用中常见的定制对象
加 进 ZedGraphWeb 控 件 之 后 ， 添 加 ZedGraphWeb1_Render－
类名 说明
Graph 事件函数，方法与上例相同。下面是 Default.aspx 页面
对多个图形进行管理的类，派生于 PaneBase。其使用不是
文件的全部内容：
MasterPane 必须的，因为可以直接使用 GraphPane，但它提供了规划编排
<%@ Page Language=" C#" CodeFile=" Default.aspx.cs" 和管理 GraphPane 的方法。
Inherits=" Default" %> 画图主要类，由 PaneBase 派生，包括所有其它的类作为其属
GraphPane
<%@ Register TagPrefix=" zgw" Namespace=" ZedGraph. 性，也包括控件中图的标题、图框、轴、
背景等。
Web" Assembly=" ZedGraph.Web" %> Axis 类的子类，包括轴的许多表示，如刻度、
网格、
颜色、
画笔、
XAxis, YAxis, Y2Axis
<ZGW:ZEDGRAPHWEB id = " ZedGraphWeb1" runat = " 字体、标题和样式。

server" width = " 300" Height = " 200" RenderMode = " 维护 Axis 类的一个类实例。包括比例范围、
步长、
格式和显示

RawImage" OnRenderGraph = " ZedGraphWeb1_Render－ Scale 选择。可以定义成线性、对数、文字、日期、序次、指数、线性顺

序和时间顺序。
Graph" />
Legend 描述图例位置、字体、颜色等规定的类。
此时 RenderMode 属性声明为“RawImage”。对代码文件
抽象的基类包括单条曲线的数据。由它派生出 LineItem,
Default.aspx.cs 的处理与上例相同，文件内容与 2.2.1 的文件也 CurveItem BarItem, HiLowBarItem, ErrorBarItem, PieItem, StickItem,
完全相同，它绘制了图 3 表示的柱状图。 OHLCBarItem 和 JapaneseCandleStickItem。

3 控件常用的定制类 CurveList
维护 CurveItem 对象列表的集合类，曲线在这个列表中的顺序
决定画图的叠放顺序，最后的曲线在所有其它曲线之后。
经过上面的过程之后，可以尝试各种不同的图形。Zed－
在画点对象上附加位置信息的抽象基类，TextObj, ImageObj,
graph 具有很大的灵活性，通过修改作图属性，能在很大的范 GraphObj LineObj, ArrowObj, EllipseObj, BoxObj, 和 PolyObj 都源于

围改变画法。图形的所有部件都封装在类结构中，它们具有 GraphObj。
对象列表的集合类。对象在这个列表中的顺序加上 ZOrder
控制输出的可修改属性，表 1 列出了部分 Zedgraph 控件的常
GraphObjList 属性决定画图的叠放顺序，在 ZOrder 值相同的情况下，最后
用对象，便于进一步改变图形时参考。对于每个类的具体细 的项在所有其它项之后。
节可参考 Zedgraph 的 XML 文档。 包括图上文字字体系列、颜色、角度、大小、样式、框架和填充

通过访问这些类的属性，可以对图形进行修改，使其符 FontSpec 背景的应用类。每个包括文字信息的类可以包含一个或多

个 FontSpec 对象用于特定的相关字体。文字支持中文。
合期望的数据表现形式。利用 VS.NET 开发平台提供的智能感
包括背景颜色填充特性的应用类。每个具有颜色填充能力的
知功能，只要对弹出的对象和属性进行选择操作即可改变图 Fill
对象都有一个或多个 Fill 对象用于相应颜色填充的特定描述。
形，实现需要的样式。Zedgraph 类库用 C# 语言开发，本文代 包括对象边界特性的应用类。每个具有边界能力的对象都有
Border
码也是用 C# 语言写的，由于.NET 平台的多语言特性，其他语 一个或多个 Border 对象用于相应边界颜色和线型的特定描述。
Location 用于处理图型对象位置的通用类。
言也可以使用。
封装了双精度单个数据对的数据结构，表示数据点（X,Y），这是
4 结语 PointPair
在每个 CurveItem 中的数值数组的内部数据存储格式。

在软件项目开发中应用 Zedgraph 模块进行应用界面的开 PointPairList 维护对象列表的集合类。

这个类封装了一个日期时间值，
（存储为 System.Double），以及一
发，能方便直观地表示数据内容，类库较强的绘图功能和一 XDate
个含多种换转方法的函数数组，可以转换成时间轴上的多种日期
定的渲染能力，可以画出表现出色的图形，适合于一般常见
时间。
科学数据的表达。由于程序开发是面向对象的，可以方便地
对其进行定制或继承，满足特殊应用时的需要。本文从初始 作者简介
应用角度出发，通过最简单的图形，对 Zedgraph 开源画图程 朱亦钢，男 （1960-），高级工程师，硕士，主要从事材料数
序的使用方法做了初步的介绍，分别讲述了控件在 Windows 据库工作。
客户端程序和 Web 程序中的应用，以及 Web 程序中的两种图

-124-