Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5445700
  • 博文数量: 895
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8691
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(895)

文章存档

2021年(2)

2020年(10)

2019年(40)

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(272)

2010年(1)

2009年(53)

2008年(65)

2007年(47)

2006年(81)

2005年(12)

分类: C#/.net

2013-06-26 20:34:38

测试运行

使用 WPF 生成图形

基于一组与测试有关的数据来生成图形是一项常见的软件开发任务。根据我的经验,最常用的方法是将数据导入 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 开源托管站点下载该库。我将副本保存在 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=""
Title="Window1" WindowState="Normal" Height="500" Width="800" Background="Wheat">

然后,添加关键的绘图对象,如图 2 所示。


图 2 添加关键的绘图对象


点击(此处)折叠或打开

  1. <d3:ChartPlotter Name="plotter" Margin="10,10,20,10">
  2.             <d3:ChartPlotter.HorizontalAxis>
  3.                 <d3:HorizontalDateTimeAxis Name="dateAxis"/>
  4.             </d3:ChartPlotter.HorizontalAxis>
  5.             <d3:ChartPlotter.VerticalAxis>
  6.                 <d3:VerticalIntegerAxis Name="countAxis"/>
  7.             </d3:ChartPlotter.VerticalAxis>
  8.             <d3:Header FontFamily="Arial" Content="Bug Information"/>
  9.             <d3:VerticalAxisTitle FontFamily="Arial" Content="Count"/>
  10.             <d3:HorizontalAxisTitle FontFamily="Arial" Content="Date"/>
  11.         </d3:ChartPlotter>

ChartPlotter 元素是主要显示对象。在该元素的定义中,我添加了水平日期轴和垂直整数轴的声明。DynamicDataDisplay 库的默认轴类型是具有小数部分的数字(在 C# 术语中称为 double 类型);该类型无需显式轴声明。我还添加了一个标头标题声明和轴标题声明。图 3 显示迄今为止的设计。


图 3 BugGraph 程序设计

转到源代码

配置了项目的静态内容后,便已准备就绪,可以添加用于读取源数据并以编程方式生成图形的代码。在解决方案资源管理器窗口中双击 Window1.xaml.cs 文件,以将该 C# 文件加载到代码编辑器中。图 4 列出了生成图 1 中图形的程序的完整源代码。

图 4 BugGraph 项目的源代码


点击(此处)折叠或打开

  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Windows;
  5. using System.Windows.Media;
  6. using Microsoft.Research.DynamicDataDisplay;
  7. using Microsoft.Research.DynamicDataDisplay.DataSources;
  8. using Microsoft.Research.DynamicDataDisplay.PointMarkers;

  9. namespace BugInfo
  10. {
  11.     public partial class Window1 : Window
  12.     {
  13.         public Window1()
  14.         {
  15.             InitializeComponent();
  16.         }

  17.         private void Window_Loaded(object sender, RoutedEventArgs e)
  18.         {
  19.             string path = System.IO.Directory.GetCurrentDirectory();

  20.             List<BugInfo> bugInfoList = LoadBugInfo(path + @"\BugInfo.txt");

  21.             DateTime[] dates = new DateTime[bugInfoList.Count];
  22.             int[] numberOpen = new int[bugInfoList.Count];
  23.             int[] numberClosed = new int[bugInfoList.Count];

  24.             for (int i = 0; i < bugInfoList.Count; ++i)
  25.             {
  26.                 dates[i] = bugInfoList[i].date;
  27.                 numberOpen[i] = bugInfoList[i].numberOpen;
  28.                 numberClosed[i] = bugInfoList[i].numberClosed;
  29.             }

  30.             var datesDataSource = new EnumerableDataSource<DateTime>(dates);
  31.             datesDataSource.SetXMapping(x => dateAxis.ConvertToDouble(x));

  32.             var numberOpenDataSource = new EnumerableDataSource<int>(numberOpen);
  33.             numberOpenDataSource.SetYMapping(y => y);

  34.             var numberClosedDataSource = new EnumerableDataSource<int>(numberClosed);
  35.             numberClosedDataSource.SetYMapping(y => y);

  36.             CompositeDataSource compositeDataSource1 = new
  37.               CompositeDataSource(datesDataSource, numberOpenDataSource);
  38.             CompositeDataSource compositeDataSource2 = new
  39.               CompositeDataSource(datesDataSource, numberClosedDataSource);

  40.             plotter.AddLineGraph(compositeDataSource1,
  41.               new Pen(Brushes.Blue, 2),
  42.               new CirclePointMarker { Size = 10.0, Fill = Brushes.Red },
  43.               new PenDescription("Number bugs open"));

  44.             plotter.AddLineGraph(compositeDataSource2,
  45.               new Pen(Brushes.Green, 2),
  46.               new TrianglePointMarker
  47.               {
  48.                   Size = 10.0,
  49.                   Pen = new Pen(Brushes.Black, 2.0),
  50.                   Fill = Brushes.GreenYellow
  51.               },
  52.               new PenDescription("Number bugs closed"));

  53.             plotter.Viewport.FitToView();

  54.         } // Window1_Loaded()


  55.         private static List<BugInfo> LoadBugInfo(string fileName)
  56.         {
  57.             var result = new List<BugInfo>();
  58.             FileStream fs = new FileStream(fileName, FileMode.Open);
  59.             StreamReader sr = new StreamReader(fs);

  60.             string line = string.Empty;
  61.             while ((line = sr.ReadLine()) != null && !line.Equals(string.Empty))
  62.             {
  63.                 string[] pieces = line.Split(':');
  64.                 DateTime d = DateTime.Parse(pieces[0]);
  65.                 int numopen = int.Parse(pieces[1]);
  66.                 int numclosed = int.Parse(pieces[2]);
  67.                 BugInfo bi = new BugInfo(d, numopen, numclosed);
  68.                 result.Add(bi);
  69.             }
  70.             sr.Close();
  71.             fs.Close();
  72.             return result;
  73.         }

  74.     }

  75.     public class BugInfo
  76.     {
  77.         public DateTime date;
  78.         public int numberOpen;
  79.         public int numberClosed;

  80.         public BugInfo(DateTime date, int numberOpen, int numberClosed)
  81.         {
  82.             this.date = date;
  83.             this.numberOpen = numberOpen;
  84.             this.numberClosed = numberClosed;
  85.         }
  86.     }
  87. }
我删除了 Visual Studio 模板生成的不必要的 using 命名空间语句(如 System.Windows.Shapes)。然后向 DynamicDataDisplay 库中的三个命名空间添加了 using 语句,从而不必完全限定其名称。接下来,在 Window1 构造函数中为程序定义的主例程添加一个事件:

点击(此处)折叠或打开

  1. Loaded += new RoutedEventHandler(Window1_Loaded);
下面是该主例程的开头部分:

点击(此处)折叠或打开

  1. private void Window_Loaded(object sender, RoutedEventArgs e)
  2.         {
  3.             string path = System.IO.Directory.GetCurrentDirectory();

  4.             List<BugInfo> bugInfoList = LoadBugInfo(path + @"\BugInfo.txt");
我声明了一个泛型列表对象 bugInfoList,并使用一个程序定义的帮助器方法(名为 LoadBugInfo)将文件 BugInfo.txt 中的虚拟数据填充到该列表中。为了组织我的错误信息,我声明了一个小帮助器类 BugInfo,如图 5 所示。

图 5 帮助器类 BugInfo


点击(此处)折叠或打开

  1. public class BugInfo
  2.     {
  3.         public DateTime date;
  4.         public int numberOpen;
  5.         public int numberClosed;

  6.         public BugInfo(DateTime date, int numberOpen, int numberClosed)
  7.         {
  8.             this.date = date;
  9.             this.numberOpen = numberOpen;
  10.             this.numberClosed = numberClosed;
  11.         }
  12.     }
为简单起见,我将三个数据字段声明为公共类型,而不是声明为与 get 和 set 属性相结合的私有类型。因为 BugInfo 只是数据,所以我可以使用 C# 结构而不使用类。LoadBugInfo 方法打开 BugInfo.txt 文件并遍历该文件,分析每个字段,然后实例化 BugInfo 对象,并将每个 BugInfo 对象存储到结果列表中,如图 6 所示。

图 6 LoadBugInfo 方法


点击(此处)折叠或打开

  1. private static List<BugInfo> LoadBugInfo(string fileName)
  2. {
  3.   var result = new List<BugInfo>();
  4.   FileStream fs = new FileStream(fileName, FileMode.Open);
  5.   StreamReader sr = new StreamReader(fs);
  6.      
  7.   string line = "";
  8.   while ((line = sr.ReadLine()) != null)
  9.   {
  10.     string[] pieces = line.Split(':');
  11.     DateTime d = DateTime.Parse(pieces[0]);
  12.     int numopen = int.Parse(pieces[1]);
  13.     int numclosed = int.Parse(pieces[2]);
  14.     BugInfo bi = new BugInfo(d, numopen, numclosed);
  15.     result.Add(bi);
  16.   }
  17.   sr.Close();
  18.   fs.Close();
  19.   return result;
  20. }

我可以使用 File.ReadAllLines 方法将数据文件中的所有行读入一个字符串数组,而不是读取并处理该文件中的每一行。请注意,为了使代码短小、清晰,我省略了常规的错误检查步骤,但您在生产环境中应执行该检查。

接下来,我对三个数组进行声明并赋值,如图 7 所示。

图 7 构建数组


点击(此处)折叠或打开

  1. DateTime[] dates = new DateTime[bugInfoList.Count];
  2.   int[] numberOpen = new int[bugInfoList.Count];
  3.   int[] numberClosed = new int[bugInfoList.Count];

  4.   for (int i = 0; i < bugInfoList.Count; ++i)
  5.   {
  6.     dates[i] = bugInfoList[i].date;
  7.     numberOpen[i] = bugInfoList[i].numberOpen;
  8.     numberClosed[i] = bugInfoList[i].numberClosed;
  9.   }
  10.   ...

使用 DynamicDataDisplay 库时,将显示数据组织为一维数组集通常很方便。作为我的程序设计(即将数据读入一个列表对象,然后将列表数据传输到数组)的替代方法,我可以将数据直接读入数组。

接下来,我将数据数组转换为特殊的 EnumerableDataSource 类型:

点击(此处)折叠或打开

  1.             var datesDataSource = new EnumerableDataSource<DateTime>(dates);
  2.             datesDataSource.SetXMapping(x => dateAxis.ConvertToDouble(x));

  3.             var numberOpenDataSource = new EnumerableDataSource<int>(numberOpen);
  4.             numberOpenDataSource.SetYMapping(y => y);

  5.             var numberClosedDataSource = new EnumerableDataSource<int>(numberClosed);
  6.             numberClosedDataSource.SetYMapping(y => y);
对于 DynamicDataDisplay 库,要绘制的所有数据都必须为统一格式。我只是将三个数据数组传递给泛型 EnumerableDataSource 构造函数。此外,必须告知该库与每个数据源关联的轴(x 轴或 y 轴)。SetXMapping 和 SetYMapping 方法接受将方法委托作为参数。我使用了 lambda 表达式来创建匿名方法,而不是定义显式委托。DynamicDataDisplay 库的基本轴数据类型是 double。SetXMapping 和 SetYMapping 方法将我的特殊数据类型映射到 double 类型。

x 轴上,我使用 ConvertToDouble 方法将 DateTime 数据显式转换为 double 类型。在 y 轴上,我只是编写 y => y(读作“y 转为 y”),将输入 int y 隐式转换为输出 double y。我也可以通过编写 SetYMapping(y => Convert.ToDouble(y) 来显式进行类型映射。我可以任意选择 xy 作为 lambda 表达式的参数,即,我可以使用任意参数名称。

下一步是组合 x 轴和 y 轴数据源:

点击(此处)折叠或打开

  1. CompositeDataSource compositeDataSource1 = new
  2.               CompositeDataSource(datesDataSource, numberOpenDataSource);
  3.             CompositeDataSource compositeDataSource2 = new
  4.               CompositeDataSource(datesDataSource, numberClosedDataSource);
图 1
中的屏幕截图显示了在同一个图形中绘制的两个数据系列,即打开的错误数和已关闭的错误数。每个复合数据源定义一个数据系列,因此,我在此处需要两个单独的数据源:一个用于打开的错误数,一个用于已关闭的错误数。当数据全都准备好时,实际上只需一条语句便可绘制数据点:

点击(此处)折叠或打开

  1. plotter.AddLineGraph(compositeDataSource1,
  2.               new Pen(Brushes.Blue, 2),
  3.               new CirclePointMarker { Size = 10.0, Fill = Brushes.Red },
  4.               new PenDescription("Number bugs open"));
AddLineGraph 方法接受 CompositeDataSource,后者定义要绘制的错误以及有关确切的绘制方式的信息。此处,我指示名为 plotter 的绘图器对象(在 Window1.xaml 文件中定义)执行以下操作:使用粗细为 2 的蓝色线条绘制一个图形,放置具有红色边框和红色填充且大小为 10 的圆圈标记,并添加系列标题 Number bugs open。太巧妙了!作为许多备选方法中的一种,我可以使用

点击(此处)折叠或打开

  1. plotter.AddLineGraph(compositeDataSource1, Colors.Red, 1, "Number Open")
来绘制不带标记的细红色线条。或者,我也可以创建虚线而不是实线:

点击(此处)折叠或打开

  1. Pen dashedPen = new Pen(Brushes.Magenta, 3);
  2. dashedPen.DashStyle = DashStyles.DashDot;
  3. plotter.AddLineGraph(compositeDataSource1, dashedPen,
  4.   new PenDescription("Open bugs"));

我的程序最后会绘制第二个数据系列:

点击(此处)折叠或打开

  1. ...
  2.     plotter.AddLineGraph(compositeDataSource2,
  3.     new Pen(Brushes.Green, 2),
  4.     new TrianglePointMarker { Size = 10.0,
  5.       Pen = new Pen(Brushes.Black, 2.0),
  6.       Fill = Brushes.GreenYellow },
  7.     new PenDescription("Number bugs closed"));

  8.   plotter.Viewport.FitToView();

  9. }

此处,我指示绘图器使用带有三角形标记的绿色线条,这些三角形标记具有黑色边框和黄绿色填充。FitToView 方法将图形缩放为 WPF 窗口的大小。

指示 Visual Studio 生成 BugGraph 项目后,我获得 BugGraph.exe 可执行文件,可以随时以手动方式或编程方式启动该文件。我只需编辑 BugInfo.txt 文件就可更新基础数据。因为整个系统基于 .NET Framework 代码,所以我可将绘图功能轻松地集成到任何 WPF 项目中,而不必处理跨技术问题。DynamicDataDisplay 库还有一个 Silverlight 版本,因此我也可以向 Web 应用程序中添加编程绘图功能。

散点图

前一节中展示的技术可以应用于所有类型的数据,而不仅是与测试相关的数据。我们来简单了解一下另一个简单但令人印象相当深刻的示例。图 8 中的屏幕截图显示了 13,509 个美国城市。


图 8 散点图示例

您可能可以识别出福罗里达州、德克萨斯州、南加利福尼亚州以及五大湖的位置。我从一个库获得了该散点图的数据,该库中的数据旨在用于旅行商问题 ( ),这在计算机科学领域是一个最有名且广为研究的主题之一。我使用的文件 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 类成员,如下所示:


点击(此处)折叠或打开

  1. public int id;
  2.   public double lat;
  3.   public double lon;
图 9
显示了修改后的 LoadMapInfo 方法中的关键处理循环。

图 9 散点图的循环

点击(此处)折叠或打开

  1. while ((line = sr.ReadLine()) != null)
  2. {
  3.    if (line.StartsWith("//"))
  4.      continue;
  5.    else {
  6.      string[] pieces = line.Split(' ');
  7.      int id = int.Parse(pieces[0]);
  8.      double lat = double.Parse(pieces[1]);
  9.      double lon = -1.0 * double.Parse(pieces[2]);
  10.      MapInfo mi = new MapInfo(id, lat, lon);
  11.      result.Add(mi);
  12.    }
  13. }
我让代码检查当前行是否以程序定义的注释标记开头,如果是,则跳过该行。请注意,我将经度派生的字段乘以 -1.0,因为经度在 x 轴方向上是从东向西(或从右向左)。如果不使用 -1.0 因子,则我的地图将是正确方向的镜像图像。


我填充原始数据数组时,只需确保将纬度和经度分别与 y 轴和 x 轴关联即可:  

点击(此处)折叠或打开

  1. for (int i = 0; i < mapInfoList.Count; ++i)
  2. {
  3.    ids[i] = mapInfoList[i].id;
  4.    xs[i] = mapInfoList[i].lon;
  5.    ys[i] = mapInfoList[i].lat;
  6.  }
如果我颠倒关联顺序,则产生的地图会沿其边缘倾斜。当我绘制数据时,只需要稍微调整一下便可创建散点图而不是折线图:

点击(此处)折叠或打开

  1. plotter.AddLineGraph(compositeDataSource,
  2.    new Pen(Brushes.White, 0),
  3.    new CirclePointMarker { Size = 2.0, Fill = Brushes.Red },
  4.    new PenDescription("U.S. cities"));
通过向 Pen 构造函数传递 0 值,我指定了一根宽度为 0 的线条,这可有效地删除该线条,从而创建散点图而不是折线图。产生的图形效果很棒,而且只需要几分钟就可编写出生成该图形的程序。相信我,我尝试过其他很多种方法来绘制地理数据,将 WPF 和 DynamicDataDisplay 库结合使用是我找到的最好的解决方案之一。

轻松绘图

我在此处展示的技术可用于以编程方式生成图形。该技术的关键是 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 年)一书的作者。可通过 与他联系。

阅读(7474) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~