C#曲线绘制.docx

1、C#曲线绘制用C#绘制实时曲线图（转）2009年07月14日 星期二 下午 03:19在实际项目中我们经常需要绘制一些实时的数据图片，比如当前各公司的用水量、用电量还有播放声音视频时实时显示当前的声频等等，在我们最熟悉的任务管理器也有这么一个功能，用来表示当前CPU的使用频率，最近笔者刚刚给朋友完成了一个类似的功能图，用曲线图来实时表示一些实际数据，由于形象直观，很受客户欢迎。不过由于某些原因，本人不能将实际项目中的代码拿出来给大家分享，只能模拟了一个简单的实现，代码没有过多优化，所以还存在很多可以优化的地方，希望有兴趣的朋友自己完善。为了操作和应付变化，所以将绘制曲线图的功能单独封装成一个类

2、，里面的数据完全是模拟的，在横向坐标上每个像素间隔用一个点来控制（实际中可能会加大这个距离），横向是个随机生成的数（实际开发中这应该来自我们的实时数据按比率计算得来的），显示窗体中用到了一个线程来定时绘制实时曲线。实际代码如下：view plaincopy to clipboardprint?1. usingSystem; 2. usingSystem.Collections.Generic; 3. usingSystem.Text; 4. usingSystem.Drawing; 5. usingSystem.Drawing.Imaging; 6. 7. namespaceRealtimeC

3、urve 8. 9. / 10. / 说明：实时图片生成类，在本例中横向坐标上每个像素都会有一个控制点11. / 实际开发中可以减少控制点，比如每5个像素用一个控制点12. / 这样的效果或许更加逼真13. / 14. publicclassRealTimeImageMaker 15. 16. privateintwidth;/要生成的曲线图的宽度17. privateintheight;/要生成的曲线图的高度18. privatePoint pointList;/用来绘制曲线图的关键点，依次将这些点连接起来即得到曲线图19. privateRandom random =newRandom()

4、;/用于生成随机数20. privateBitmap currentImage;/当前要绘制的图片21. privateColor backColor;/图片背景色22. privateColor foreColor;/图片前景色23. / 24. / 图片的高度25. / 26. publicintHeight 27. 28. getreturnheight; 29. set height = value; 30. 31. 32. / 33. / 图片的宽度34. / 35. publicintWidth 36. 37. getreturnwidth; 38. set width = val

5、ue; 39. 40. / 41. / 构造函数，指定生成的曲线图的宽度和高度42. / 43. / 要生成的曲线图的宽度44. / 要生成的曲线图的高度45. publicRealTimeImageMaker(intwidth,intheight):this(width,height,Color.Gray,Color.Blue) 46. 47. 48. 49. / 50. / 构造函数，指定生成的曲线图的宽度、高度及背景色和前景色51. / 52. / 要生成的曲线图的宽度53. / 要生成的曲线图的高度54. / 曲线图背景色55. / 曲线图前景色56. publicRealTimeIm

6、ageMaker(intwidth,intheight, Color backColor, Color foreColor) 57. 58. this.width = width; 59. this.height = height; 60. this.backColor = backColor; 61. this.foreColor = foreColor; 62. pointList =newPointwidth; 63. Point tempPoint; 64. /初始化曲线上的所有点坐标65. for(inti = 0; i width; i+) 66. 67. 68. tempPoin

7、t =newPoint(); 69. /曲线的横坐标沿x轴依次递增，在横向位置上每个像素都有一个点70. tempPoint.X = i; 71. /曲线上每个点的纵坐标随机生成，但保证在显示区域之内72. tempPoint.Y = random.Next() % height; 73. pointListi = tempPoint; 74. 75. 76. / 77. / 获取当前依次连接曲线上每个点绘制成的曲线78. / 79. / 80. publicImage GetCurrentCurve() 81. 82. /currentImage = historyImage.Clone(n

8、ew Rectangle(1, 0, width - 1, height), PixelFormat.Format24bppRgb);83. currentImage =newBitmap(width, height); 84. Point p; 85. /将当前定位曲线图的坐标点前移，并且将横坐标减1，86. /这样做的效果相当于移除当前第一个点87. for(inti = 0; i width-1; i+) 88. 89. p = pointListi + 1; 90. pointListi =newPoint(p.X-1,p.Y); 91. 92. Point tempPoint =ne

9、wPoint(); 93. /新生成曲线图定位点的最后一个点的坐标94. tempPoint.X = width; 95. /曲线上每个点的纵坐标随机生成，但保证在显示区域之内96. tempPoint.Y = random.Next(DateTime.Now.Millisecond) % height; 97. /在最后再添加一个新坐标点98. pointListwidth-1=tempPoint; 99. Graphics g = Graphics.FromImage(currentImage); 100. g.Clear(backColor); 101. /绘制曲线图102. g.Dra

10、wLines(newPen(foreColor), pointList); 103. g.Dispose(); 104. returncurrentImage; 105. 106. 107. 1. usingSystem; 2. usingSystem.Collections.Generic; 3. usingSystem.ComponentModel; 4. usingSystem.Data; 5. usingSystem.Drawing; 6. usingSystem.Text; 7. usingSystem.Windows.Forms; 8. usingSystem.Threading;

11、 9. 10. namespaceRealtimeCurve 11. 12. / 13. / 说明：显示实时曲线图的窗体14. href=15. / 16. publicpartialclassFormRealTime : Form 17. 18. Thread thread; 19. RealTimeImageMaker rti; 20. Color backColor = Color.Black;/指定绘制曲线图的背景色21. publicFormRealTime() 22. 23. InitializeComponent(); 24. rti =newRealTimeImageMaker

12、(Width, Height, backColor, Color.Green); 25. thread =newThread(newThreadStart(Run); 26. thread.Start(); 27. 28. 29. privatevoidRun() 30. 31. while(true) 32. 33. Image image = rti.GetCurrentCurve(); 34. Graphics g = CreateGraphics(); 35. /用指定背景色清除当前窗体上的图象36. g.Clear(backColor); 37. g.DrawImage(image,

13、 0, 0); 38. g.Dispose(); 39. /每秒钟刷新一次40. Thread.Sleep(1000); 41. 42. 43. 44. privatevoidFormRealTime_FormClosing(objectsender, FormClosingEventArgs e) 45. 46. /在窗体即将关闭之前中止线程47. thread.Abort(); 48. 49. 50. 程序最终的运行结果截图：MSchart一。安装 控件的安装相对比较简单，下载完后，先执行“MSChart.exe”程序，它会自动检测你的环境，安装到系统目录中去，如果要在VS 2008环境中

14、直接使用，那么需要安装For Vs2008的插件，MSChart_VisualStudioAddOn.exe，还有一个中文语言包MSChartLP_chs.exe。安装完后，打开Vs2008，在建立项目的时候，你就能在工具栏中看到有一个Chart的控件了，如下图：二。使用 安装好后，建立一个.NET3.5的Web项目，像使用普通控件一样拖放到要使用的Web界面即可。初步研究了一下，整个图形控件主要由以下几个部份组成：1.Annotations -图形注解集合2.ChartAreas -图表区域集合3.Legends -图例集合4.Series -图表序列集合（即图表数据对象集合）5.Title

15、s-图标的标题集合Annotations注解集合 Annotations是一个对图形的一些注解对象的集合，所谓注解对象，类似于对某个点的详细或者批注的说明，比如，在图片上实现各个节点的关键信息，如下图方框和黄色的小方框： 一个图形上可以拥有多个注解对象，可以添加十多种图形样式的注解对象，包括常见的箭头、云朵、矩行、图片等等注解符号，通过各个注解对象的属性，可以方便的设置注解对象的放置位置、呈现的颜色、大小、文字内容样式等常见的属性。ChartAreas图表区域集合 ChartAreas可以理解为是一个图表的绘图区，例如，你想在一幅图上呈现两个不同属性的内容，一个是用户流量，另一个则是系统资源占

16、用情况，那么你要在一个图形上绘制这两种情况，明显是不合理的，对于这种情况，可以建立两个ChartArea，一个用于呈现用户流量，另一个则用于呈现系统资源的占用情况。 当然了，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进行添加。对于每一个绘图区域，你可以设置各自的属性，如：X,Y轴属性、背景等。需要注意的是，绘图区域只是一个可以作图的区域范围，它本身并不包含要作图形的各种属性数据。多绘图区效果图如下，分为上下两个绘图区域，分别表示不同的绘图数据：Legends图例集合 Legends是一个图例的集合，即标注图形中各个线条或颜色的含义，同样，一个图片也可以包含多个图例说明，比如像上面

17、说的多个图表区域的方式，则可以建立多个图例，每别说明各个绘图区域的信息，具体的图例配置说明此处就不详细说明了，可以参考一下官网的例子，写得丰富的详细了：）也上一张图例的效果图吧Series图表序列 图表序列，应该是整个绘图中最关键的内容了，通俗点说，即是实际的绘图数据区域，实际呈现的图形形状，就是由此集合中的每一个图表来构成的，可以往集合里面添加多个图表，每一个图表可以有自己的绘制形状、样式、独立的数据等。 需要注意的是，每一个图表，你可以指定它的绘制区域（见ChartAreas的说明），让此图表呈现在某个绘图区域，也可以让几个图表在同一个绘图区域叠加，如下图：上面两幅图，分别表示了把图表放在

18、不同的绘制区域和放在同一个绘制区域的情况。 继续回到ChartAreas章节举的例子，同时要显示用户的流量还要显示系统的占用情况，对于这种时候，应该建立两个Series，一个用于呈现用户的流量，另一个则用于呈现系统的占用情况。它们分别属于各自的绘图区域。Titles标题合集 根据字面含义即可以理解，是图表的标题配置，同样可以添加多个标题，以及设置标题的样式及文字、位置等属性。多看一下它的属性即能明白各自的含义。三。其它属性 相对来说，我觉得比较有用的属性有三个，分别是：Label、Tooltip以及Url链接。 Label即标签的含义，可以在图片的关键位置进行一些关键数字或文字的描述，如下图：

19、像上图：X轴和Y轴的文字便是标签，以及图表曲线中的红点上的文字，也是标签，添加了标签，可以让人更容易的对内容进行理解。 Tooltip即提示的含义，用于在各个关键点，如：标签、图形关键点、标题等当鼠标移动上去的时候，提示用户一些相关的详细或说明信息，例如上图，可以给曲线中的每一个点增加Tooltip的属性，写上需要详细说明的内容，比如：详细的销售明细，那么，在鼠标移动到这个点的时候，会自动弹出提示信息。 Tooltip可以支持简单方式以及自定义的方式，简单方式即像平时Html页面设置的title之类的属性效果，而自定义的方式，则可以实现图形、文本等各种复杂的提示信息显示。详细的方式请参考官方例

20、子的：Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相关例子。 Url链接，图表控件中，有一大半的控件都有Url及Tooltip的属性，你可以设置此属性，在鼠标点击的时候，代到其它相应的页面去。建议大家看看官方例子中的Interactivity and AJAX部份，很精彩：）例子：建立一个Cpu信息和内存使用的实时统计表 下面写一个小例子，建立一个系统的内存实时统计图表，使用到了Ajax的方法，以及Windows Api取得系统内存的方法。 首先，建立一个Aspx页面，拖动一个图表控

21、件到页面，设置图表控件的属性如下： 其中，MEMORY_INFO,ComputerInfo是一个定义的结构体及调用Win32 API接口的一个访问类。程序分别取得每一个图表对象，每次加载的时候，都重新取得当前的内存和Cpu信息，再在图表上添加一个点，需要注意的是，一定要设置图表控件的EnableViewState属性为True，否则无法记录状态。Code一共建立了两个绘图区，一个用于呈现内存使用情况的在ChartArea1区域，另一个则是呈现Cpu使用情况的，放置在ChartArea2区域了。一共有三个图表，分别表示已使用的物理内存、全部占用的物理内存，以及Cpu使用显示的情况。添加一个Aja

22、x的计时器以及Ajax的ScriptManager，UpdatePanel，把计时器和图表控件都拖进UpdatePanel里面。设置计时器的间隔时间为一秒钟（1000），双击计时器，写如下代码：Code 附上取得内存信息的类代码：Code 运行的效果图如下： 先写到这里吧呵呵，第一次写教程，经验不足，希望各位提点意见哈到时再看看有没有必要再继续写一篇。 本来在考虑是否继续写图表控件的使用文章,毕竟,微软自带的例子已经非常详细了,花点时间参考一下基本上可以了解用法和使用特性,不过后来想想,还是写一下咯,抽出其中大家关心的内容,写出其中常用的使用方法,可以省去大家的时间,在需要深入的时候再去详细查

23、看例子,也当是学习笔记吧:)(BTW:我也是边学习边写的,因此,写的文章中难免有不足或失误的地方,希望各位朋友指正出来咯,大家一起提高本文中基本上只会写出最简单常用的功能,复杂的数据操作请参考微软详细的例程)一.数据源说到绘制图表,可能很多人的第一反应除了是图表呈现的方式外,更关心的便是数据如何添加,记得在很多年前,哪时要绘制一个数据曲线图,一直找不到好的呈现方式,后来使用了SVG的绘图模式,不过在添加数据的时候可谓吃尽了苦头,毕竟,SVG只是一种描述语言,要动态的实现一个图表的绘制,是非常困难的.对于微软的图表控件,数据添加是一件很简单的方式,它支持多种数据添加方式,如: 可以在图表的设计界面,在属性设置窗口中的Series属性下的Points中添加需要的数据. 可以在图表的设计界面中,在属性中绑定一个数据源.