微软图表控件MsChart使用指南docxWord文档格式.docx
《微软图表控件MsChart使用指南docxWord文档格式.docx》由会员分享，可在线阅读，更多相关《微软图表控件MsChart使用指南docxWord文档格式.docx（25页珍藏版）》请在冰豆网上搜索。
安装完后，打开Vs2008，在建立项目的时候，你就能在工具栏中看到有一个Chart的控件了，如下图：
一Silvei-ligit
F指针會Silverli
9SftFLiy&
r
1.Annotations
2.ChartAreas
3.Legends
4.Series
二。
使用
安装好后，建立一个.NET3.5的Web项目，像使用普通控件一样拖放到要使用的Web界面即可。
初步研究了一下，整个图形控件主要由以下几个部份组成：
--图形注解集合
--图表区域集合
--图例集合
--图表序列集合（即图表数据对象集合）
Annotations注解集合
Annotations是一个对图形的一些注解对象的集合，所谓注解
对象，类似于对某个点的详细或者批注的说明，比如，在图片上实
现各个节点的关键信息，如下图方框和黄色的小方框：
一个图形上可以拥有多个注解对象，可以添加十多种图形样式的
注解对象，包括常见的箭头、云朵、矩行、图片等等注解符号，通
过各个注解对象的属性，可以方便的设置注解对象的放置位置、呈
现的颜色、大小、文字内容样式等常见的属性。
ChartAreas图表区域集合
ChartAreas可以理解为是一个图表的绘图区，例如，你想在
一幅图上呈现两个不同属性的内容，一个是用户流量，另一个则是
系统资源占用情况，那么你要在一个图形上绘制这两种情况，明显是不合理的，对于这种情况，可以建立两个ChartArea，一个用
于呈现用户流量，另一个则用于呈现系统资源的占用情况。
当然了，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进行添加。
对于每一个绘图区域，你可以设置各自的属性，如：
X,Y轴属性、背景等。
需要注意的是，绘图区域只是一个可以作图的区域范围，它本身并不包含要作图形的各种属性数据。
多绘图区效果图如下，分为上下两个绘图区域，分别表示不同的绘图数据：
NoAlignrrent
q
Legends图例集合
Legends是一个图例的集合，即标注图形中各个线条或颜色的含义，同样，一个图片也可以包含多个图例说明，比如像上面说的多个图表区域的方式，则可以建立多个图例，每别说明各个绘图区域的信息，具体的图例配置说明此处就不详细说明了，可以参考一下官网的例子，写得丰富的详细了：
）也上一张图例的效果图吧
SeparatorSpacing
Series图表序列
图表序列，应该是整个绘图中最关键的内容了，通俗点说，即是实际的绘图数据区域，实际呈现的图形形状，就是由此集合中的每一个图表来构成的，可以往集合里面添加多个图表，每一个图表可以有自己的绘制形状、样式、独立的数据等。
需要注意的是，每一个图表，你可以指定它的绘制区域（见C
hartAreas的说明），让此图表呈现在某个绘图区域，也可以让几个图表在同一个绘图区域叠加，如下图：
上面两幅图，分别表示了把图表放在不同的绘制区域和放在同一个绘制区域的情况。
们分别属于各自的绘图区域。
Titles标题合集
根据字面含义即可以理解，是图表的标题配置，同样可以添加多个标题，以及设置标题的样式及文字、位置等属性。
多看一下它的属性即能明白各自的含义。
三。
其它属性
相对来说，我觉得比较有用的属性有三个，分别是：
Label、T
ooltip以及Url链接。
Label即标签的含义，可以在图片的关键位置进行一些关键数字或文字的描述，如下图：
67处610仆12n
十一月-f耳H月十一月十一月H月-f月
ZW日ZQ4B2QV-&
2W820462X冃
像上图：
X轴和Y轴的文字便是标签，以及图表曲线中的红点上的文字，也是标签，添加了标签，可以让人更容易的对内容进行理解。
Tooltip即提示的含义，用于在各个关键点，如：
标签、图形关键点、标题等当鼠标移动上去的时候，提示用户一些相关的详细或说明信息，例如上图，可以给曲线中的每一个点增加Tooltip的属性，写上需要详细说明的内容，比如：
详细的销售明细，那么，在鼠标移动到这个点的时候，会自动弹出提示信息。
Tooltip可以支持简单方式以及自定义的方式，简单方式即像平时Html页面设置的title之类的属性效果，而自定义的方式，则可以实现图形、文本等各种复杂的提示信息显示。
详细的方式请参考官方例子的：
InteractivityandAJAX/Tooltips以及InteractivityandAJAX/ClientSideScripts下面的相关例子。
Url链接，图表控件中，有一大半的控件都有Url及Tooltip的属性，你可以设置此属性，在鼠标点击的时候，代到其它相应的页面去。
建议大家看看官方例子中的InteractivityandAJAX部份，很精彩：
）
例子：
建立一个Cpu信息和内存使用的实时统计表
下面写一个小例子，建立一个系统的内存实时统计图表，使用
到了Ajax的方法，以及WindowsApi取得系统内存的方法。
首先，建立一个Aspx页面，拖动一个图表控件到页面，设置图表控件的属性如下：
是一个定义的结构体
其中，MEMORY_INFO,Computerlnfo
及调用Win32API接口的一个访问类。
程序分别取得每一个图表
对象，每次加载的时候，都重新取得当前的内存和Cpu信息，再
在图表上添加一个点，需要注意的是，一定要设置图表控件的En
ableViewState属性为True，否则无法记录状态。
E□
<
asp:
ChartID二"
ChartMemory"
runat二"
server"
BackColor=
"
LightSteelBlue"
BackGradientStyle二"
TopBottom"
BackSecondaryColor="
Whi
te"
EnableTheming="
False"
EnableViewState="
True"
Height="
363px"
Width二"
415px"
>
Legends>
LegendAlignment="
Center"
Docking二"
Bottom"
Name
="
Legend1"
Title="
图例"
/asp:
Legend>
/Legends>
Titles>
TitleFont="
微软雅黑，16pt"
Name="
Title1"
Text="
系统
内存监控图表"
Title>
/Titles>
Series>
SeriesBorderColor二"
White"
BorderWidth="
3"
ChartAr
ea="
ChartArea1"
ChartType="
Spline"
Legend二"
Legend1"
已使用物理
内存"
XValueType二"
Double"
YValueType二"
〉
SeriesBorderWidth="
ChartArea="
Cha
rtType="
Legend="
全部占用内存"
SeriesChartArea="
ChartArea2"
ChartType二"
StackedA
rea"
Legend="
Name="
CPU"
/Series>
ChartAreas>
ChartAreaBackColor二"
224,224,224"
BackGradientS
tyle二"
LeftRight"
ChartArea>
ChartAreaName="
ChartArea
/ChartAreas>
Chart>
一共建立了两个绘图区，一个用于呈现内存使用情况的在ChartA
real区域，另一个则是呈现Cpu使用情况的，放置在ChartArea2区域了。
一共有三个图表，分别表示已使用的物理内存、全部占用的物理内存，以及Cpu使用显示的情况。
添加一个Ajax的计时器以及Ajax的ScriptManager，Update
Panel，把计时器和图表控件都拖进UpdatePanel里面。
设置计
时器的间隔时间为一秒钟（1000），双击计时器，写如下代码：
ComputerInfo.GlobalMemoryStatus（refMemInfo）;
//UseMemory
Seriesseries=ChartMemory.Series[0];
intxCount=series.Points.Count==0?
0:
series.Points.
Count-1;
doublelastXValue=series.Points.Count==0?
1:
series.
Points[xCount].XValuentsexceeds100.
fo.dwAvailPhys）/1024/1024;
//TotalMemory
/1024/1024;
//CPU
while（this.ChartMemory.Series[0].Points.Count>
80）
//Removeseriespoints
foreach（Seriessinthis.ChartMemory.Series）
{
s.Points.RemoveAt（0）;
}
//Adjustcategoricalscale
doubleaxisMinimum二this.ChartMemory.Series]
[0].XValue;
this.ChartMemory.ChartAreas]0].AxisX.Minimum
mum;
this.ChartMemory.ChartAreas]0].AxisX.Maximum
mum+99;
0].Points
=axisMini
附上取得内存信息的类代码:
III<
summary>
III取得计算机的系统信息
Isummary>
publicclassComputerinfo
III取得Windows的目录
IIIvparamname="
WinDir"
Iparam>
count"
[Dlllmport（"
kernel32"
）]
publicstaticexternvoidGetWindowsDirectory（StringBuilderWinDir,intcount）;
III获取系统路径
SysDir"
publicstaticexternvoidGetSystemDirectory（StringBuilder
SysDir,intcount）;
Ill取得CPU信息
lsummary>
Illvparamname="
cpuinfo"
v/param>
publicstaticexternvoidGetSystemInfo（refCPU_INFOcpuinfo）;
Ill<
Ill取得内存状态
meminfo"
/param>
publicstaticexternvoidGlobalMemoryStatus（refMEMORY
」NFOmeminfo）;
Ill取得系统时间
stinfo"
publicstaticexternvoidGetSystemTime（refSYSTEMTIME_
INFOstinfo）;
publicComputerInfo（）
//定义CPU的信息结构
[StructLayout（LayoutKind.Sequential）]
publicstructCPU_INFO
public
uint
dwOemId;
dwPageSize;
lpMinimumApplicationAddress;
lpMaximumApplicationAddress;
dwActiveProcessorMask;
dwNumberOfProcessors;
dwProcessorType;
dwAllocationGranularity;
dwProcessorLevel;
dwProcessorRevision;
//定义内存的信息结构
publicstructMEMORY_INFO
dwLength;
dwMemoryLoad;
dwTotalPhys;
dwAvailPhys;
dwTotalPageFile;
dwAvailPageFile;
dwTotalVirtual;
dwAvailVirtual;
//定义系统时间的信息结构
publicstructSYSTEMTIME_INFO
ushort
wYear;
wMonth;
wDayOfWeek;
wDay;
wHour;
wMinute;
wSecond;
publicushortwMilliseconds;
运行的效果图如下:
系统内存监控图表
全部占用內存一已使用攪理内存
先写到这里吧~呵呵，第一次写教程，经验不足，希望各位提点
意见哈~到时再看看有没有必要再继续写一篇。
数据绑定（交叉表）
本来在考虑是否继续写图表控件的使用文章，毕竟,微软自带的例
子已经非常详细了，花点时间参考一下基本上可以了解用法和使用特性,不过后来想想，还是写一下咯，抽出其中大家关心的内容，写出其中常用的使用方法，可以省去大家的时间，在需要深入的时候再去详细查看例子，也当是学习笔记吧：
）（BTW:
我也是边学习边写的
因此,写的文章中难免有不足或失误的地方，希望各位朋友指正出
来咯,大家一起提咼~本文中基本上只会写出最简单常用的功能，复
杂的数据操作请参考微软详细的例程）
一.数据源
说到绘制图表，可能很多人的第一反应除了是图表呈现的方式
外,更关心的便是数据如何添加，记得在很多年前，哪时要绘制一个数据曲线图，一直找不到好的呈现方式，后来使用了SVG的绘图模式,不过在添加数据的时候可谓吃尽了苦头，毕竟,SVG只是一种描
述语言,要动态的实现一个图表的绘制，是非常困难的•对于微软的图表控件,数据添加是一件很简单的方式，它支持多种数据添加方式,如：
.可以在图表的设计界面，在属性设置窗口中的Series属性下
的Points中添加需要的数据.
.可以在图表的设计界面中，在属性中绑定一个数据源.
•可以在后台代码中，动态添加数据.
-可以在后台代码中设置一个或多个数据源，直接绑定到图表
中.
在此处,我只着重讲解一下第3,4两点.对于第3点，相对来说比较简单，在后台代码中，找到要添加代码的Series,通过它下面P
oints的Add、AddXY、AddY等方法，即可以实现数据的添加.例
如：
doublet;
for（t=0;
t<
=（2.5*Math.PI）;
t+=Math.PI/6）
doublech1=Math.Sin（t）;
doublech2=Math.Sin（t-Math.PI/2）;
Chart1.Series["
Channel1"
].Points.AddXY（t,ch1）;
Channel2"
].Points.AddXY（t,ch2）;
（注：
代码摘自微软的例子，上例中，Chart1为图表的名字，Ch
annel1、Channel2分别表示两个Series数据序列）
先来看看图表控件都支持什么类型的数据绑定，根据官方文
档的说法，只要是实现了IEnumerable接口的数据类型，都可以
绑定到图表控件中，例如：
DataView,DataReader,DataSet,DataRow,DataColumn,Array,List,SqlCommand,OleD
bCommand,SqlDataAdapter,及OleDbDataAdapter对象。
对于开发来说，最常用的还是DataView、DataReader、DataSet、DataRow、Array、List这几种类型了，有几点需要注意一下：
-图表控件支持多数据源的绑定，例如：
X轴绑定一个数据集
ds1,Y轴可以绑定另一个数据集ds2，当然也可以是X轴绑
定到一个List数据对象，Y轴绑定到一个DataView对象等
•图表控件的绑定方式一般有两种，常规绑定及交差表的绑定
.图表控件的Y轴数据，支持一次绑定多个值，以绘制时间、区域、使用量等之类的图形。
绑定数据的流程如下：
Chait.DataBivid
Method
ChrtdDah'
if^ntfTflljteMeihod
大意是，绑定数据里面是否有分组数据需要绑定，如果有，则调用交叉表绑定的方法。
否则判断是否时绑定X轴和丫轴（包括
标签、超链接、图例文字等自定义属性），如果是，贝跚用Point
s.DataBind方法进行绑定操作。
再判断是否有不同的X轴或Y轴数据，如果有，则分别调用X,Y轴的绑定方法Points.DataBind
X,Points.DataBindY进行数据绑定。
最后，再判断是否需要进
行多个Y轴值的绑定。
F面分别对几种数据绑定的方法进行一下说明:
升级会员 