C#曲线绘制.docx

上传人:b****6 文档编号:4057035 上传时间:2022-11-27 格式:DOCX 页数:79 大小:1.30MB
下载 相关 举报
C#曲线绘制.docx_第1页
第1页 / 共79页
C#曲线绘制.docx_第2页
第2页 / 共79页
C#曲线绘制.docx_第3页
第3页 / 共79页
C#曲线绘制.docx_第4页
第4页 / 共79页
C#曲线绘制.docx_第5页
第5页 / 共79页
点击查看更多>>
下载资源
资源描述

C#曲线绘制.docx

《C#曲线绘制.docx》由会员分享,可在线阅读,更多相关《C#曲线绘制.docx(79页珍藏版)》请在冰豆网上搜索。

C#曲线绘制.docx

C#曲线绘制

用C#绘制实时曲线图(转)

2009年07月14日星期二下午03:

19

在实际项目中我们经常需要绘制一些实时的数据图片,比如当前各公司的用水量、用电量还有播放声音视频时实时显示当前的声频等等,在我们最熟悉的任务管理器也有这么一个功能,用来表示当前CPU的使用频率,最近笔者刚刚给朋友完成了一个类似的功能图,用曲线图来实时表示一些实际数据,由于形象直观,很受客户欢迎。

不过由于某些原因,本人不能将实际项目中的代码拿出来给大家分享,只能模拟了一个简单的实现,代码没有过多优化,所以还存在很多可以优化的地方,希望有兴趣的朋友自己完善。

为了操作和应付变化,所以将绘制曲线图的功能单独封装成一个类,里面的数据完全是模拟的,在横向坐标上每个像素间隔用一个点来控制(实际中可能会加大这个距离),横向是个随机生成的数(实际开发中这应该来自我们的实时数据按比率计算得来的),显示窗体中用到了一个线程来定时绘制实时曲线。

实际代码如下:

viewplaincopytoclipboardprint?

1.using System;  

2.using System.Collections.Generic;  

3.using System.Text;  

4.using System.Drawing;  

5.using System.Drawing.Imaging;  

6.  

7.namespace RealtimeCurve  

8.{  

9.    ///

   

10.    ///说明:

实时图片生成类,在本例中横向坐标上每个像素都会有一个控制点   

11.    ///实际开发中可以减少控制点,比如每5个像素用一个控制点   

12.    ///这样的效果或许更加逼真   

13.    ///

   

14.    public class RealTimeImageMaker  

15.    {  

16.        private int width;//要生成的曲线图的宽度   

17.        private int height;//要生成的曲线图的高度   

18.        private Point[]pointList;//用来绘制曲线图的关键点,依次将这些点连接起来即得到曲线图   

19.        private Randomrandom= new Random();//用于生成随机数   

20.        private BitmapcurrentImage;//当前要绘制的图片   

21.        private ColorbackColor;//图片背景色   

22.        private ColorforeColor;//图片前景色   

23.        ///

   

24.        ///图片的高度   

25.        ///

   

26.        public int Height  

27.        {  

28.            get { return height;}  

29.            set {height=value;}  

30.        }  

31.      

32.        ///

   

33.        ///图片的宽度   

34.        ///

   

35.        public int Width  

36.        {  

37.            get { return width;}  

38.            set {width=value;}  

39.        }  

40.        ///

   

41.        ///构造函数,指定生成的曲线图的宽度和高度   

42.        ///

   

43.        ///要生成的曲线图的宽度   

44.        ///要生成的曲线图的高度   

45.        public RealTimeImageMaker(int width, int height):

this(width,height,Color.Gray,Color.Blue)  

46.        {  

47.              

48.        }  

49.        ///

   

50.        ///构造函数,指定生成的曲线图的宽度、高度及背景色和前景色   

51.        ///

   

52.        ///要生成的曲线图的宽度   

53.        ///要生成的曲线图的高度   

54.        ///曲线图背景色   

55.        ///曲线图前景色   

56.        public RealTimeImageMaker(int width, int height,ColorbackColor,ColorforeColor)  

57.        {  

58.            this.width=width;  

59.            this.height=height;  

60.            this.backColor=backColor;  

61.            this.foreColor=foreColor;  

62.            pointList= new Point[width];  

63.            PointtempPoint;  

64.            //初始化曲线上的所有点坐标   

65.            for (int i=0;i

66.            {  

67.  

68.                tempPoint= new Point();  

69.                //曲线的横坐标沿x轴依次递增,在横向位置上每个像素都有一个点   

70.                tempPoint.X=i;  

71.                //曲线上每个点的纵坐标随机生成,但保证在显示区域之内   

72.                tempPoint.Y=random.Next()%height;  

73.                pointList[i]=tempPoint;  

74.            }  

75.        }  

76.        ///

   

77.        ///获取当前依次连接曲线上每个点绘制成的曲线   

78.        ///

   

79.        ///   

80.        public ImageGetCurrentCurve()  

81.        {  

82.            //currentImage=historyImage.Clone(newRectangle(1,0,width-1,height),PixelFormat.Format24bppRgb);   

83.            currentImage= new Bitmap(width,height);  

84.            Pointp;  

85.            //将当前定位曲线图的坐标点前移,并且将横坐标减1,   

86.            //这样做的效果相当于移除当前第一个点   

87.            for (int i=0;i

88.            {  

89.                p=pointList[i+1];  

90.                pointList[i]= new Point(p.X-1,p.Y);  

91.            }  

92.            PointtempPoint= new Point();  

93.            //新生成曲线图定位点的最后一个点的坐标   

94.            tempPoint.X=width;  

95.            //曲线上每个点的纵坐标随机生成,但保证在显示区域之内   

96.            tempPoint.Y=random.Next(DateTime.Now.Millisecond)%height;  

97.            //在最后再添加一个新坐标点   

98.            pointList[width-1]=tempPoint;  

99.            Graphicsg=Graphics.FromImage(currentImage);  

100.            g.Clear(backColor);  

101.            //绘制曲线图   

102.            g.DrawLines(new Pen(foreColor),pointList);  

103.            g.Dispose();  

104.            return currentImage;  

105.        }  

106.    }  

107.}  

1.using System;  

2.using System.Collections.Generic;  

3.using System.ComponentModel;  

4.using System.Data;  

5.using System.Drawing;  

6.using System.Text;  

7.using System.Windows.Forms;  

8.using System.Threading;  

9.  

10.namespace RealtimeCurve  

11.{  

12.    ///

   

13.    ///说明:

显示实时曲线图的窗体   

14.href="   

15.    ///

   

16.    public partial class FormRealTime:

Form  

17.    {  

18.        Threadthread;  

19.        RealTimeImageMakerrti;  

20.        ColorbackColor=Color.Black;//指定绘制曲线图的背景色   

21.        public FormRealTime()  

22.        {  

23.            InitializeComponent();  

24.            rti= new RealTimeImageMaker(Width,Height,backColor,Color.Green);  

25.            thread= new Thread(new ThreadStart(Run));  

26.            thread.Start();  

27.        }  

28.  

29.        private void Run()  

30.        {  

31.            while (true)  

32.            {  

33.                Imageimage=rti.GetCurrentCurve();  

34.                Graphicsg=CreateGraphics();  

35.                //用指定背景色清除当前窗体上的图象   

36.                g.Clear(backColor);  

37.                g.DrawImage(image,0,0);  

38.                g.Dispose();  

39.                //每秒钟刷新一次   

40.                Thread.Sleep(1000);  

41.            }  

42.        }  

43.  

44.        private void FormRealTime_FormClosing(object sender,FormClosingEventArgse)  

45.        {  

46.            //在窗体即将关闭之前中止线程   

47.            thread.Abort();  

48.        }  

49.    }  

50.}  

程序最终的运行结果截图:

MSchart

一。

安装

    控件的安装相对比较简单,下载完后,先执行“MSChart.exe”程序,它会自动检测你的环境,安装到系统目录中去,如果要在VS2008环境中直接使用,那么需要安装ForVs2008的插件,MSChart_VisualStudioAddOn.exe,还有一个中文语言包MSChartLP_chs.exe。

安装完后,打开Vs2008,在建立项目的时候,你就能在工具栏中看到有一个Chart的控件了,如下图:

二。

使用

   安装好后,建立一个.NET3.5的Web项目,像使用普通控件一样拖放到要使用的Web界面即可。

初步研究了一下,整个图形控件主要由以下几个部份组成:

1.Annotations--图形注解集合

2.ChartAreas --图表区域集合

3.Legends     --图例集合

4.Series   --图表序列集合(即图表数据对象集合)

5.Titles    --图标的标题集合

Annotations注解集合

    Annotations是一个对图形的一些注解对象的集合,所谓注解对象,类似于对某个点的详细或者批注的说明,比如,在图片上实现各个节点的关键信息,如下图方框和黄色的小方框:

 一个图形上可以拥有多个注解对象,可以添加十多种图形样式的注解对象,包括常见的箭头、云朵、矩行、图片等等注解符号,通过各个注解对象的属性,可以方便的设置注解对象的放置位置、呈现的颜色、大小、文字内容样式等常见的属性。

ChartAreas图表区域集合

   ChartAreas可以理解为是一个图表的绘图区,例如,你想在一幅图上呈现两个不同属性的内容,一个是用户流量,另一个则是系统资源占用情况,那么你要在一个图形上绘制这两种情况,明显是不合理的,对于这种情况,可以建立两个ChartArea,一个用于呈现用户流量,另一个则用于呈现系统资源的占用情况。

   当然了,图表控件并不限制你添加多少个绘图区域,你可以根据你的需要进行添加。

对于每一个绘图区域,你可以设置各自的属性,如:

X,Y轴属性、背景等。

    需要注意的是,绘图区域只是一个可以作图的区域范围,它本身并不包含要作图形的各种属性数据。

    多绘图区效果图如下,分为上下两个绘图区域,分别表示不同的绘图数据:

   Legends图例集合

   Legends是一个图例的集合,即标注图形中各个线条或颜色的含义,同样,一个图片也可以包含多个图例说明,比如像上面说的多个图表区域的方式,则可以建立多个图例,每别说明各个绘图区域的信息,具体的图例配置说明此处就不详细说明了,可以参考一下官网的例子,写得丰富的详细了:

)也上一张图例的效果图吧~

Series图表序列

    图表序列,应该是整个绘图中最关键的内容了,通俗点说,即是实际的绘图数据区域,实际呈现的图形形状,就是由此集合中的每一个图表来构成的,可以往集合里面添加多个图表,每一个图表可以有自己的绘制形状、样式、独立的数据等。

   需要注意的是,每一个图表,你可以指定它的绘制区域(见ChartAreas的说明),让此图表呈现在某个绘图区域,也可以让几个图表在同一个绘图区域叠加,如下图:

上面两幅图,分别表示了把图表放在不同的绘制区域和放在同一个绘制区域的情况。

    继续回到ChartAreas章节举的例子,同时要显示用户的流量还要显示系统的占用情况,对于这种时候,应该建立两个Series,一个用于呈现用户的流量,另一个则用于呈现系统的占用情况。

它们分别属于各自的绘图区域。

Titles标题合集

   根据字面含义即可以理解,是图表的标题配置,同样可以添加多个标题,以及设置标题的样式及文字、位置等属性。

多看一下它的属性即能明白各自的含义。

三。

其它属性

   相对来说,我觉得比较有用的属性有三个,分别是:

Label、Tooltip以及Url链接。

   Label即标签的含义,可以在图片的关键位置进行一些关键数字或文字的描述,如下图:

像上图:

X轴和Y轴的文字便是标签,以及图表曲线中的红点上的文字,也是标签,添加了标签,可以让人更容易的对内容进行理解。

   Tooltip即提示的含义,用于在各个关键点,如:

标签、图形关键点、标题等当鼠标移动上去的时候,提示用户一些相关的详细或说明信息,例如上图,可以给曲线中的每一个点增加Tooltip的属性,写上需要详细说明的内容,比如:

详细的销售明细,那么,在鼠标移动到这个点的时候,会自动弹出提示信息。

   Tooltip可以支持简单方式以及自定义的方式,简单方式即像平时Html页面设置的title之类的属性效果,而自定义的方式,则可以实现图形、文本等各种复杂的提示信息显示。

详细的方式请参考官方例子的:

InteractivityandAJAX/Tooltips以及InteractivityandAJAX/ClientSideScripts下面的相关例子。

   Url链接,图表控件中,有一大半的控件都有Url及Tooltip的属性,你可以设置此属性,在鼠标点击的时候,代到其它相应的页面去。

   建议大家看看官方例子中的InteractivityandAJAX部份,很精彩:

例子:

建立一个Cpu信息和内存使用的实时统计表

   下面写一个小例子,建立一个系统的内存实时统计图表,使用到了Ajax的方法,以及WindowsApi取得系统内存的方法。

   首先,建立一个Aspx页面,拖动一个图表控件到页面,设置图表控件的属性如下:

  其中,MEMORY_INFO,ComputerInfo是一个定义的结构体及调用Win32API接口的一个访问类。

程序分别取得每一个图表对象,每次加载的时候,都重新取得当前的内存和Cpu信息,再在图表上添加一个点,需要注意的是,一定要设置图表控件的EnableViewState属性为True,否则无法记录状态。

 

Code

 

 

一共建立了两个绘图区,一个用于呈现内存使用情况的在ChartArea1区域,另一个则是呈现Cpu使用情况的,放置在ChartArea2区域了。

一共有三个图表,分别表示已使用的物理内存、全部占用的物理内存,以及Cpu使用显示的情况。

添加一个Ajax的计时器以及Ajax的ScriptManager,UpdatePanel,把计时器和图表控件都拖进UpdatePanel里面。

设置计时器的间隔时间为一秒钟(1000),双击计时器,写如下代码:

Code

 

 

 

  附上取得内存信息的类代码:

 

Code

 

   运行的效果图如下:

  先写到这里吧~呵呵,第一次写教程,经验不足,希望各位提点意见哈~到时再看看有没有必要再继续写一篇。

   本来在考虑是否继续写图表控件的使用文章,毕竟,微软自带的例子已经非常详细了,花点时间参考一下基本上可以了解用法和使用特性,不过后来想想,还是写一下咯,抽出其中大家关心的内容,写出其中常用的使用方法,可以省去大家的时间,在需要深入的时候再去详细查看例子,也当是学习笔记吧:

)(BTW:

我也是边学习边写的,因此,写的文章中难免有不足或失误的地方,希望各位朋友指正出来咯,大家一起提高~本文中基本上只会写出最简单常用的功能,复杂的数据操作请参考微软详细的例程)

一.数据源   

  说到绘制图表,可能很多人的第一反应除了是图表呈现的方式外,更关心的便是数据如何添加,记得在很多年前,哪时要绘制一个数据曲线图,一直找不到好的呈现方式,后来使用了SVG的绘图模式,不过在添加数据的时候可谓吃尽了苦头,毕竟,SVG只是一种描述语言,要动态的实现一个图表的绘制,是非常困难的.对于微软的图表控件,数据添加是一件很简单的方式,它支持多种数据添加方式,如:

∙可以在图表的设计界面,在属性设置窗口中的Series属性下的Points中添加需要的数据.

∙可以在图表的设计界面中,在属性中绑定一个数据源.

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 初中教育 > 政史地

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1