微软图表控件MsChart使用指南docxWord文档格式.docx

1、安装完后，打开 Vs2008，在建立项目的时 候，你就能在工具栏中看到有一个 Chart的控件了，如下图：一 Silvei-li gitF指针 會 Silverli9S ftFLiy&r1.A nno tati ons2.ChartAreas3.Lege nds4.Series二。使用安装好后，建立一个.NET3.5的Web项目，像使用普通控件 一样拖放到要使用的 Web界面即可。初步研究了一下，整个图形 控件主要由以下几个部份组成：-图形注解集合-图表区域集合-图例集合-图表序列集合（即图表数据对象集合）Anno tati ons 注解集合Ann otatio ns 是一个对图形的一些注解对

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

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

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

5、图表放在不同的绘制区域和放在同一个 绘制区域的情况。们分别属于各自的绘图区域。Titles标题合集根据字面含义即可以理解，是图表的标题配置，同样可以添加 多个标题，以及设置标题的样式及文字、位置等属性。多看一下它 的属性即能明白各自的含义。三。其它属性相对来说，我觉得比较有用的属性有三个，分别是： Label、Tooltip 以及Url链接。Label即标签的含义，可以在图片的关键位置进行一些关键数 字或文字的描述，如下图：67 处 6 10 仆 12 n十一月-f耳H月 十一月 十一月H月-f月ZW 日 ZQ4B 2QV-& 2W8 2046 2X 冃像上图：X轴和Y轴的文字便是标签，以及图

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

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

8、一个 Aspx 页面，拖动一个图表控件到页面，设置 图表控件的属性如下：是一个定义的结构体其中，MEMORY_INFO,Computerlnfo及调用Win32 API接口的一个访问类。 程序分别取得每一个图表对象，每次加载的时候，都重新取得当前的内存和 Cpu信息，再在图表上添加一个点，需要注意的是，一定要设置图表控件的 EnableViewState 属性为True，否则无法记录状态。E Legends Legend Alignment =Center Docking 二Bottom Name=Legend1 Title =图例/ asp:Legend / Legends Titles T

9、itle Font =微软雅黑，16pt Name =Title1 Text =系统内存监控图表Title / Titles Series Series BorderColor 二White BorderWidth =3 ChartArea=ChartArea1ChartType =Spli ne Lege nd 二Lege nd1已使用物理内存XValueType 二DoubleYValueType 二Series BorderWidth = ChartArea = ChartType =Lege nd =全部占用内存Series ChartArea =ChartArea2 ChartTyp

10、e 二StackedArea Legend =Name =CPU/ Series ChartAreas ChartArea BackColor 二224, 224, 224 BackGradientStyle 二LeftRightChartArea ChartArea Name =ChartArea/ ChartAreas Chart 一共建立了两个绘图区，一个用于呈现内存使用情况的在 ChartAreal区域，另一个则是呈现 Cpu使用情况的，放置在 ChartAre a2区域了。一共有三个图表，分别表示已使用的物理内存、全部 占用的物理内存，以及 Cpu使用显示的情况。添加一个 Ajax的

11、计时器以及 Ajax的ScriptManager ， UpdatePanel，把计时器和图表控件都拖进 UpdatePanel 里面。设置计时器的间隔时间为一秒钟（1000 ），双击计时器，写如下代码：ComputerInfo.GlobalMemoryStatus（ ref MemInfo）;/UseMemorySeries series = ChartMemory.Series 0;int xCount = series.Points.Count = 0 ? 0 : series.Points.Count - 1;double lastXValue = series.Points.Count

12、 = 0 ? 1 : series.Poi ntsxCou nt.XValue nts exceeds 100.fo.dwAvailPhys）/ 1024 /1024 ;/Total Memory/1024 /1024 ;/CPUwhile （this .ChartMemory.Series 0.Points.Count 80 ）/ Remove series pointsforeach （Series s in this .ChartMemory.Series）s.Poi nts.RemoveAt（ 0）;/ Adjust categorical scaledouble axisMinimu

13、m 二 this .ChartMemory.Series0.XValue;this .ChartMemory.ChartAreas 0.AxisX.Minimummum;this .ChartMemory.ChartAreas 0.AxisX.Maximummum + 99;0.Po ints=axisMi ni附上取得内存信息的类代码:III III取得计算机的系统信息Isummarypublic class ComputerinfoIII 取得Windows 的目录III vparam n ame=Wi nDirIparamco un tDlllmport（ kernel32）public

14、 static extern void GetWi ndowsDirectory（Stri ngBuilde r Win Dir, int cou nt）;III获取系统路径SysDirpublic static extern void GetSystemDirectory（Stri ngBuilderSysDir, int count）;Ill取得CPU信息lsummaryIll vparam n ame=cpui nfov/parampublic static extern void GetSystemInfo（ ref CPU_INFO cpui nfo）;Ill public stat

15、ic extern void GlobalMemoryStatus（ ref MEMORYNFO memi nfo）;Ill取得系统时间sti nfopublic static extern void GetSystemTime（ ref SYSTEMTIME_INFO stinfo）;public ComputerI nfo（）/定义CPU的信息结构StructLayout（LayoutK in d.Seque ntial）public struct CPU_INFOpublicuintdwOemId;dwPageSize;lpM inim umApplicati on Address;lp

16、MaximumApplicatio nAddress;dwActiveProcessorMask;dwNumberOfProcessors;dwProcessorType;dwAllocatio nGran ularity;dwProcessorLevel;dwProcessorRevisi on;/定义内存的信息结构public struct MEMORY_INFOdwLe ngth;dwMemoryLoad;dwTotalPhys;dwAvailPhys;dwTotalPageFile;dwAvailPageFile;dwTotalVirtual;dwAvailVirtual;/定义系统时

17、间的信息结构public struct SY STEMTIME_INFOushortwY ear;wMo nth;wDayOfWeek;wDay;wHour;wMi nu te;wSec ond;public ushort wMillisec onds;运行的效果图如下:系统内存监控图表全部占用內存一已使用攪理内存先写到这里吧呵呵，第一次写教程，经验不足，希望各位提点意见哈到时再看看有没有必要再继续写一篇。数据绑定（交叉表）本来在考虑是否继续写图表控件的使用文章 ，毕竟,微软自带的例子已经非常详细了，花点时间参考一下基本上可以了解用法和使用 特性,不过后来想想，还是写一下咯，抽出其中大家关心的

18、内容，写出 其中常用的使用方法，可以省去大家的时间，在需要深入的时候再 去详细查看例子，也当是学习笔记吧：）（BTW:我也是边学习边写的因此,写的文章中难免有不足或失误的地方 ，希望各位朋友指正出来咯,大家一起提咼本文中基本上只会写出最简单常用的功能 ，复杂的数据操作请参考微软详细的例程 ）一.数据源说到绘制图表，可能很多人的第一反应除了是图表呈现的方式外,更关心的便是数据如何添加，记得在很多年前，哪时要绘制一个 数据曲线图，一直找不到好的呈现方式，后来使用了 SVG的绘图模 式,不过在添加数据的时候可谓吃尽了苦头 ，毕竟,SVG只是一种描述语言,要动态的实现一个图表的绘制，是非常困难的对于微

19、软的 图表控件,数据添加是一件很简单的方式，它支持多种数据添加方 式,如：.可以在图表的设计界面，在属性设置窗口中的 Series属性下的Points中添加需要的数据.可以在图表的设计界面中，在属性中绑定一个数据源.可以在后台代码中，动态添加数据.-可以在后台代码中设置一个或多个数据源 ，直接绑定到图表中.在此处,我只着重讲解一下第 3,4两点.对于第3点，相对来说 比较简单，在后台代码中，找到要添加代码的Series,通过它下面Points的Add、AddXY、AddY等方法，即可以实现数据的添加.例如：double t;for （t = 0; t = （ 2.5 * Math.PI）; t

20、 += Math.PI/ 6）double ch1 = Math.Si n（ t）;double ch2 = Math.Si n（t-Math.PI/ 2）;Chart1.Series Channel 1 .Points.AddXY（t, ch1）;Channel 2 .Points.AddXY（t, ch2）;（注：代码摘自微软的例子，上例中， Chart1为图表的名字，Channel 1、Channel 2分别表示两个 Series数据序列）先来看看图表控件都支持什么类型的数据绑定，根据官方文档的说法，只要是实现了 IEnumerable 接口的数据类型，都可以绑定到图表控件中， 例如：D

21、ataView, DataReader, DataSet, DataRow, DataColu mn, Array, List, SqlComma nd, OleDbCommand, SqlDataAdapter, 及 OleDbDataAdapter 对象。对于开发来说，最常用的还是 DataView、DataReader 、D ataSet、DataRow、Array、List这几种类型了，有几点需要注 意一下：-图表控件支持多数据源的绑定，例如： X轴绑定一个数据集ds1,Y轴可以绑定另一个数据集 ds2，当然也可以是X轴绑定到一个List数据对象，Y轴绑定到一个DataView 对象等

22、图表控件的绑定方式一般有两种， 常规绑定及交差表的绑定.图表控件的Y轴数据，支持一次绑定多个值，以绘制时间、 区域、使用量等之类的图形。绑定数据的流程如下：Chait. DataBi vidMethodChrtd Dahif ntfTflljte Meihod大意是，绑定数据里面是否有分组数据需要绑定，如果有，则 调用交叉表绑定的方法。否则判断是否时绑定 X轴和丫轴（包括标签、超链接、图例文字等自定义属性），如果是，贝跚用 Points.DataBind 方法进行绑定操作。再判断是否有不同的 X轴或Y轴 数据，如果有，则分别调用 X,Y轴的绑定方法 Points.DataBindX, Points.DataBindY 进行数据绑定。最后，再判断是否需要进行多个Y轴值的绑定。F面分别对几种数据绑定的方法进行一下说明: