基于一组与测试有关的数据来生成图形是一项常见的软件开发任务。根据我的经验,最常用的方法是将数据导入 Excel 电子表格,然后使用 Excel 内置的绘图功能手动生成图形。这种做法适用于大多数情况,但是如果基础数据频繁更改,则手动创建图形可能很快就变得枯燥乏味。在本月的专栏中,我将向您演示如何使用 Windows Presentation Foundation (WPF) 技术自动执行该过程。若要了解我所阐述的观点,请看图 1。该图按日期显示打开和已关闭的错误的计数,是使用从简单文本文件读取数据的一个短小 WPF 程序动态生成的。
图 1 以编程方式生成的错误计数图
打开的错误(用蓝色线条上的红圈表示)在开发工作开始后不久迅速增多,然后随时间推移逐渐减少(这是在估计零错误反弹日期时可能十分有用的信息)。已关闭的错误(绿色线条上的三角形标记)则稳步增多。
虽然这些信息可能十分有用,但在生产环境中,开发资源通常是有限的,因此手动生成这类图形可能不太值得。但是使用我将说明的技术,可快速而轻松地创建这类图形。
在下面几节中,我将详细展示和说明用于生成图 1 中图形的 C# 代码。本专栏假设您已具备 C# 编码方面的中级知识,并对 WPF 有最基本的了解。不过,即使您从前没有接触过这两个领域,我认为您也能够理解我所讨论的内容。我相信您会发现这项技术对于您的综合技能是个有趣且有用的补充。
建立项目
我首先启动 Visual Studio 2008,并使用 WPF 应用程序模板新建一个 C# 项目。从“新建项目”对话框右上方区域的下拉控件中选择 .NET Framework 3.5 库。将项目命名为 BugGraph。虽然您可以使用 WPF 基元以编程方式生成图形,但我使用了方便的 DynamicDataDisplay 库(由 Microsoft 研究院实验室开发)。
您可以从位于 codeplex.com/dynamicdatadisplay 的 CodePlex 开源托管站点下载该库。我将副本保存在 BugGraph 项目的根目录中,然后右键单击项目名称,选择“添加引用”选项并指向根目录中的 DLL 文件,从而在项目中添加对 DLL 的引用。
接下来创建源数据。在生产环境中,您的数据可以位于 Excel 电子表格、SQL 数据库或 XML 文件中。为简单起见,我使用简单文本文件。在 Visual Studio 解决方案资源管理器窗口中,右键单击项目名称,然后从上下文菜单中选择“添加”|“新建项”。然后选择“文本文件”项,将文件重命名为 BugInfo.txt,并单击“添加”按钮。下面是虚拟数据:
01/15/2010:0:0
02/15/2010:12:5
03/15/2010:60:10
04/15/2010:88:20
05/15/2010:75:50
06/15/2010:50:70
07/15/2010:40:85
08/15/2010:25:95
09/15/2010:18:98
10/15/2010:10:99
每行中的第一个冒号分隔字段包含一个日期,第二个字段包含关联日期的打开错误数,第三个字段显示已关闭错误数。正如稍后您将看到的那样,DynamicDataDisplay 库可以处理大多数类型的数据。
接下来,我双击 Window1.xaml 文件,以加载项目的 UI 定义。添加对绘图库 DLL 的引用,并对 WPF 显示区域的默认 Width、Height 和 Background 特性稍加修改,如下所示:
点击(此处)折叠或打开
xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
Title="Window1" WindowState="Normal" Height="500" Width="800" Background="Wheat">
图 2 添加关键的绘图对象
点击(此处)折叠或打开
- d3:ChartPlotter Name="plotter" Margin="10,10,20,10">
- d3:ChartPlotter.HorizontalAxis>
- d3:HorizontalDateTimeAxis Name="dateAxis"/>
- /d3:ChartPlotter.HorizontalAxis>
- d3:ChartPlotter.VerticalAxis>
- d3:VerticalIntegerAxis Name="countAxis"/>
- /d3:ChartPlotter.VerticalAxis>
- d3:Header FontFamily="Arial" Content="Bug Information"/>
- d3:VerticalAxisTitle FontFamily="Arial" Content="Count"/>
- d3:HorizontalAxisTitle FontFamily="Arial" Content="Date"/>
- /d3:ChartPlotter>
ChartPlotter 元素是主要显示对象。在该元素的定义中,我添加了水平日期轴和垂直整数轴的声明。DynamicDataDisplay 库的默认轴类型是具有小数部分的数字(在 C# 术语中称为 double 类型);该类型无需显式轴声明。我还添加了一个标头标题声明和轴标题声明。 图 3 显示迄今为止的设计。
图 3 BugGraph 程序设计
转到源代码
配置了项目的静态内容后,便已准备就绪,可以添加用于读取源数据并以编程方式生成图形的代码。在解决方案资源管理器窗口中双击 Window1.xaml.cs 文件,以将该 C# 文件加载到代码编辑器中。图 4 列出了生成图 1 中图形的程序的完整源代码。
图 4 BugGraph 项目的源代码
点击(此处)折叠或打开
- using System;
- using System.Collections.Generic;
- using System.IO;
- using System.Windows;
- using System.Windows.Media;
- using Microsoft.Research.DynamicDataDisplay;
- using Microsoft.Research.DynamicDataDisplay.DataSources;
- using Microsoft.Research.DynamicDataDisplay.PointMarkers;
-
- namespace BugInfo
- {
- public partial class Window1 : Window
- {
- public Window1()
- {
- InitializeComponent();
- }
-
- private void Window_Loaded(object sender, RoutedEventArgs e)
- {
- string path = System.IO.Directory.GetCurrentDirectory();
-
- ListBugInfo> bugInfoList = LoadBugInfo(path + @"\BugInfo.txt");
-
- DateTime[] dates = new DateTime[bugInfoList.Count];
- int[] numberOpen = new int[bugInfoList.Count];
- int[] numberClosed = new int[bugInfoList.Count];
-
- for (int i = 0; i bugInfoList.Count; ++i)
- {
- dates[i] = bugInfoList[i].date;
- numberOpen[i] = bugInfoList[i].numberOpen;
- numberClosed[i] = bugInfoList[i].numberClosed;
- }
-
- var datesDataSource = new EnumerableDataSourceDateTime>(dates);
- datesDataSource.SetXMapping(x => dateAxis.ConvertToDouble(x));
-
- var numberOpenDataSource = new EnumerableDataSourceint>(numberOpen);
- numberOpenDataSource.SetYMapping(y => y);
-
- var numberClosedDataSource = new EnumerableDataSourceint>(numberClosed);
- numberClosedDataSource.SetYMapping(y => y);
-
- CompositeDataSource compositeDataSource1 = new
- CompositeDataSource(datesDataSource, numberOpenDataSource);
- CompositeDataSource compositeDataSource2 = new
- CompositeDataSource(datesDataSource, numberClosedDataSource);
-
- plotter.AddLineGraph(compositeDataSource1,
- new Pen(Brushes.Blue, 2),
- new CirclePointMarker { Size = 10.0, Fill = Brushes.Red },
- new PenDescription("Number bugs open"));
-
- plotter.AddLineGraph(compositeDataSource2,
- new Pen(Brushes.Green, 2),
- new TrianglePointMarker
- {
- Size = 10.0,
- Pen = new Pen(Brushes.Black, 2.0),
- Fill = Brushes.GreenYellow
- },
- new PenDescription("Number bugs closed"));
-
- plotter.Viewport.FitToView();
-
- } // Window1_Loaded()
-
-
- private static ListBugInfo> LoadBugInfo(string fileName)
- {
- var result = new ListBugInfo>();
- FileStream fs = new FileStream(fileName, FileMode.Open);
- StreamReader sr = new StreamReader(fs);
-
- string line = string.Empty;
- while ((line = sr.ReadLine()) != null && !line.Equals(string.Empty))
- {
- string[] pieces = line.Split(':');
- DateTime d = DateTime.Parse(pieces[0]);
- int numopen = int.Parse(pieces[1]);
- int numclosed = int.Parse(pieces[2]);
- BugInfo bi = new BugInfo(d, numopen, numclosed);
- result.Add(bi);
- }
- sr.Close();
- fs.Close();
- return result;
- }
-
- }
-
- public class BugInfo
- {
- public DateTime date;
- public int numberOpen;
- public int numberClosed;
-
- public BugInfo(DateTime date, int numberOpen, int numberClosed)
- {
- this.date = date;
- this.numberOpen = numberOpen;
- this.numberClosed = numberClosed;
- }
- }
- }
点击(此处)折叠或打开
- Loaded += new RoutedEventHandler(Window1_Loaded);
点击(此处)折叠或打开
- private void Window_Loaded(object sender, RoutedEventArgs e)
- {
- string path = System.IO.Directory.GetCurrentDirectory();
-
- ListBugInfo> bugInfoList = LoadBugInfo(path + @"\BugInfo.txt");
图 5 帮助器类 BugInfo
点击(此处)折叠或打开
- public class BugInfo
- {
- public DateTime date;
- public int numberOpen;
- public int numberClosed;
-
- public BugInfo(DateTime date, int numberOpen, int numberClosed)
- {
- this.date = date;
- this.numberOpen = numberOpen;
- this.numberClosed = numberClosed;
- }
- }
图 6 LoadBugInfo 方法
点击(此处)折叠或打开
- private static ListBugInfo> LoadBugInfo(string fileName)
- {
- var result = new ListBugInfo>();
- FileStream fs = new FileStream(fileName, FileMode.Open);
- StreamReader sr = new StreamReader(fs);
-
- string line = "";
- while ((line = sr.ReadLine()) != null)
- {
- string[] pieces = line.Split(':');
- DateTime d = DateTime.Parse(pieces[0]);
- int numopen = int.Parse(pieces[1]);
- int numclosed = int.Parse(pieces[2]);
- BugInfo bi = new BugInfo(d, numopen, numclosed);
- result.Add(bi);
- }
- sr.Close();
- fs.Close();
- return result;
- }
我可以使用 File.ReadAllLines 方法将数据文件中的所有行读入一个字符串数组,而不是读取并处理该文件中的每一行。请注意,为了使代码短小、清晰,我省略了常规的错误检查步骤,但您在生产环境中应执行该检查。
接下来,我对三个数组进行声明并赋值,如图 7 所示。
图 7 构建数组
点击(此处)折叠或打开
- DateTime[] dates = new DateTime[bugInfoList.Count];
- int[] numberOpen = new int[bugInfoList.Count];
- int[] numberClosed = new int[bugInfoList.Count];
-
- for (int i = 0; i bugInfoList.Count; ++i)
- {
- dates[i] = bugInfoList[i].date;
- numberOpen[i] = bugInfoList[i].numberOpen;
- numberClosed[i] = bugInfoList[i].numberClosed;
- }
- ...
使用 DynamicDataDisplay 库时,将显示数据组织为一维数组集通常很方便。作为我的程序设计(即将数据读入一个列表对象,然后将列表数据传输到数组)的替代方法,我可以将数据直接读入数组。
接下来,我将数据数组转换为特殊的 EnumerableDataSource 类型:
点击(此处)折叠或打开
- var datesDataSource = new EnumerableDataSourceDateTime>(dates);
- datesDataSource.SetXMapping(x => dateAxis.ConvertToDouble(x));
-
- var numberOpenDataSource = new EnumerableDataSourceint>(numberOpen);
- numberOpenDataSource.SetYMapping(y => y);
-
- var numberClosedDataSource = new EnumerableDataSourceint>(numberClosed);
- numberClosedDataSource.SetYMapping(y => y);
在 x 轴上,我使用 ConvertToDouble 方法将 DateTime 数据显式转换为 double 类型。在 y 轴上,我只是编写 y => y(读作“y 转为 y”),将输入 int y 隐式转换为输出 double y。我也可以通过编写 SetYMapping(y => Convert.ToDouble(y) 来显式进行类型映射。我可以任意选择 x 和 y 作为 lambda 表达式的参数,即,我可以使用任意参数名称。
下一步是组合 x 轴和 y 轴数据源:
点击(此处)折叠或打开
- CompositeDataSource compositeDataSource1 = new
- CompositeDataSource(datesDataSource, numberOpenDataSource);
- CompositeDataSource compositeDataSource2 = new
- CompositeDataSource(datesDataSource, numberClosedDataSource);
点击(此处)折叠或打开
- plotter.AddLineGraph(compositeDataSource1,
- new Pen(Brushes.Blue, 2),
- new CirclePointMarker { Size = 10.0, Fill = Brushes.Red },
- new PenDescription("Number bugs open"));
点击(此处)折叠或打开
- plotter.AddLineGraph(compositeDataSource1, Colors.Red, 1, "Number Open")
点击(此处)折叠或打开
- Pen dashedPen = new Pen(Brushes.Magenta, 3);
- dashedPen.DashStyle = DashStyles.DashDot;
- plotter.AddLineGraph(compositeDataSource1, dashedPen,
- new PenDescription("Open bugs"));
我的程序最后会绘制第二个数据系列:
点击(此处)折叠或打开
- ...
- plotter.AddLineGraph(compositeDataSource2,
- new Pen(Brushes.Green, 2),
- new TrianglePointMarker { Size = 10.0,
- Pen = new Pen(Brushes.Black, 2.0),
- Fill = Brushes.GreenYellow },
- new PenDescription("Number bugs closed"));
-
- plotter.Viewport.FitToView();
-
- }
此处,我指示绘图器使用带有三角形标记的绿色线条,这些三角形标记具有黑色边框和黄绿色填充。FitToView 方法将图形缩放为 WPF 窗口的大小。
指示 Visual Studio 生成 BugGraph 项目后,我获得 BugGraph.exe 可执行文件,可以随时以手动方式或编程方式启动该文件。我只需编辑 BugInfo.txt 文件就可更新基础数据。因为整个系统基于 .NET Framework 代码,所以我可将绘图功能轻松地集成到任何 WPF 项目中,而不必处理跨技术问题。DynamicDataDisplay 库还有一个 Silverlight 版本,因此我也可以向 Web 应用程序中添加编程绘图功能。
散点图
前一节中展示的技术可以应用于所有类型的数据,而不仅是与测试相关的数据。我们来简单了解一下另一个简单但令人印象相当深刻的示例。图 8 中的屏幕截图显示了 13,509 个美国城市。
图 8 散点图示例
您可能可以识别出福罗里达州、德克萨斯州、南加利福尼亚州以及五大湖的位置。我从一个库获得了该散点图的数据,该库中的数据旨在用于旅行商问题 ( www.iwr.uni-heidelberg.de/groups/comopt/software/TSPLIB95),这在计算机科学领域是一个最有名且广为研究的主题之一。我使用的文件 usa13509.tsp.gz 类似于:
NAME : usa13509 (other header information) 1 245552.778 817827.778 2 247133.333 810905.556 3 247205.556 810188.889 ... 13507 489663.889 972433.333 13508 489938.889 1227458.333 13509 490000.000 1222636.111
第一个字段是从 1 开始的索引 ID。第二个和第三个字段表示从具有 500 或更多人口的美国城市的纬度和经度派生而来的坐标。我按照前一节中所述创建了一个新 WPF 应用程序,向项目中添加了一个文本文件项,并将城市数据复制到该文件中。我在数据文件的标头行前面添加了双斜杠 (//) 字符,从而注释掉这些行。
若要创建图 8 中所示的散点图,我只需对前一节中展示的示例稍加更改即可。我修改了 MapInfo 类成员,如下所示:
点击(此处)折叠或打开
public double lat;
public double lon;
图 9 散点图的循环
点击(此处)折叠或打开
- while ((line = sr.ReadLine()) != null)
- {
- if (line.StartsWith("//"))
- continue;
- else {
- string[] pieces = line.Split(' ');
- int id = int.Parse(pieces[0]);
- double lat = double.Parse(pieces[1]);
- double lon = -1.0 * double.Parse(pieces[2]);
- MapInfo mi = new MapInfo(id, lat, lon);
- result.Add(mi);
- }
- }
我填充原始数据数组时,只需确保将纬度和经度分别与 y 轴和 x 轴关联即可:
点击(此处)折叠或打开
- for (int i = 0; i mapInfoList.Count; ++i)
- {
- ids[i] = mapInfoList[i].id;
- xs[i] = mapInfoList[i].lon;
- ys[i] = mapInfoList[i].lat;
- }
点击(此处)折叠或打开
- plotter.AddLineGraph(compositeDataSource,
- new Pen(Brushes.White, 0),
- new CirclePointMarker { Size = 2.0, Fill = Brushes.Red },
- new PenDescription("U.S. cities"));
轻松绘图
我在此处展示的技术可用于以编程方式生成图形。该技术的关键是 Microsoft 研究院提供的 DynamicDataDisplay 库。如果在软件生产环境中用作独立技术来生成图形,则该方法在基础数据频繁更改时最为有用。如果在应用程序中用作集成技术来生成图形,则该方法对于 WPF 或 Silverlight 应用程序最为有用。随着这两种技术的演变,我确信将会看到更多基于这两种技术的优秀视觉显示库。
James McCaffrey 博士 供职于 Volt Information Sciences, Inc.,在该公司他负责管理对华盛顿州雷蒙德市沃什湾 Microsoft 总部园区的软件工程师进行的技术培训。他曾参与过多项 Microsoft 产品的研发工作,其中包括 Internet Explorer 和 MSN Search。McCaffrey 是《.NET Test Automation Recipes:A Problem-Solution Approach》(Apress,2006 年)一书的作者。可通过 jammc@microsoft.com 与他联系。