MsChart控件使用规范指南规范NET35doc.docx
- 文档编号:23539198
- 上传时间:2023-05-18
- 格式:DOCX
- 页数:21
- 大小:237.45KB
MsChart控件使用规范指南规范NET35doc.docx
《MsChart控件使用规范指南规范NET35doc.docx》由会员分享,可在线阅读,更多相关《MsChart控件使用规范指南规范NET35doc.docx(21页珍藏版)》请在冰豆网上搜索。
MsChart控件使用规范指南规范NET35doc
微软图表控件MsChart使用指南
昨天在网上看到了微软发布了.NET3.5框架下的图表控件,第一时间抓下来看了一下,发觉功能很强劲,基本上能想到的图表都可以使用它绘制出来,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式,不过缺点也比较明显,只能在最新的开发环境中使用,需要.Net3.5Sp1以及VS2008的开发环境。
下面是下载地址:
)–
1.包含英文版,中文版。
上面提供的链接是中文版的,可以更改为英文版。
2.
3.Microsoft.NETFramework3.5的Microsoft图表控件的语言包,包含23中语言。
4.–
这个只有英文的,没找到中文的。
5.–
这个只有英文的,没找到中文的。
6.的例子(SamplesEnvironmentforMicrosoftChartControls)–
这个只有英文的,没找到英文的。
7.Demo下载:
下了它的示例程序后,运行了一下,非常的强大,可以支持各种各样的图形显示,常见的:
点状图、饼图、柱状图、曲线图、面积图、排列图等等,同时也支持3D样式的图表显示,不过我觉得最有用的功能还是支持图形上各个点的属性操作,它可以定义图形上各个点、标签、图形的提示信息(Tooltip)以及超级链接、Javascript动作等,而不是像其它图形类库仅生成一幅图片而已,通过这些,加上微软自己的Ajax框架,可以建立一个可以互动的图形统计报表了。
一。
安装
控件的安装相对比较简单,下载完后,先执行“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是一个图例的集合,即标注图形中各个线条或颜色的含义,同样,一个图片也可以包含多个图例说明,比如像上面说的多个图表区域的方式,则可以建立多个图例,每别说明各个绘图区域的信息,具体的图例配置说明此处就不详细说明了,可以参考一下官网的例子,写得丰富的详细了:
)也上一张图例的效果图吧~
相对来说,我觉得比较有用的属性有三个,分别是:
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
ChartID="ChartMemory"runat="server"BackColor="LightSteelBlue" BackGradientStyle="TopBottom"BackSecondaryColor="White"EnableTheming="False" EnableViewState="True"Height="363px"Width="415px"> LegendAlignment="Center"Docking="Bottom"Name="Legend1"Title="图例"> Legend> TitleFont="微软雅黑,16pt"Name="Title1"Text="系统内存监控图表"> Title> SeriesBorderColor="White"BorderWidth="3"ChartArea="ChartArea1" ChartType="Spline"Legend="Legend1"Name="已使用物理内存"XValueType="Double" YValueType="Double"> Series> SeriesBorderWidth="3"ChartArea="ChartArea1"ChartType="Spline" Legend="Legend1"Name="全部占用内存"> Series> SeriesChartArea="ChartArea2"ChartType="StackedArea"Legend="Legend1" Name="CPU"> Series> ChartAreaBackColor="224,224,224"BackGradientStyle="LeftRight" Name="ChartArea1"> ChartArea> ChartAreaName="ChartArea2"> ChartArea>
Chart>
一共建立了两个绘图区,一个用于呈现内存使用情况的在ChartArea1区域,另一个则是呈现Cpu使用情况的,放置在ChartArea2区域了。
一共有三个图表,分别表示已使用的物理内存、全部占用的物理内存,以及Cpu使用显示的情况。
添加一个Ajax的计时器以及Ajax的ScriptManager,UpdatePanel,把计时器和图表控件都拖进UpdatePanel里面。
设置计时器的间隔时间为一秒钟(1000),双击计时器,写如下代码:
Code
staticPerformanceCounterpc=newPerformanceCounter("Processor","%ProcessorTime","_Total");
protectedvoidTimer1_Tick(objectsender,EventArgse)
{
MEMORY_INFOMemInfo=newMEMORY_INFO();
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].XValue+1;
doublelastYValue=(double)(MemInfo.dwTotalPhys-MemInfo.dwAvailPhys)/1024/1024;
series.Points.AddXY(lastXValue,lastYValue);
//TotalMemory
series=ChartMemory.Series[1];
lastYValue=(double)(MemInfo.dwTotalVirtual+MemInfo.dwTotalPhys-MemInfo.dwAvailPhys-MemInfo.dwAvailVirtual)/1024/1024;
series.Points.AddXY(lastXValue,lastYValue);
//CPU
series=ChartMemory.Series[2];
lastYValue=(double)pc.NextValue();
series.Points.AddXY(lastXValue,lastYValue);
//Removepointsfromtheleftchartsideifnumberofpointsexceeds100.
while(this.ChartMemory.Series[0].Points.Count>80)
{
//Removeseriespoints
foreach(Seriessinthis.ChartMemory.Series)
{
s.Points.RemoveAt(0);
}
}
//Adjustcategoricalscale
doubleaxisMinimum=this.ChartMemory.Series[0].Points[0].XValue;
this.ChartMemory.ChartAreas[0].AxisX.Minimum=axisMinimum;
this.ChartMemory.ChartAreas[0].AxisX.Maximum=axisMinimum+99;
}
附上取得内存信息的类代码:
Code
///
///取得计算机的系统信息
///
publicclassComputerInfo
{
///
///取得Windows的目录
///
///
///
[DllImport("kernel32")]
publicstaticexternvoidGetWindowsDirectory(StringBuilderWinDir,intcount);
///
///获取系统路径
///
///
///
[DllImport("kernel32")]
publicstaticexternvoidGetSystemDirectory(StringBuilderSysDir,intcount);
///
///取得CPU信息
///
///
[DllImport("kernel32")]
publicstaticexternvoidGetSystemInfo(refCPU_INFOcpuinfo);
///
///取得内存状态
///
///
[DllImport("kernel32")]
publicstaticexternvoidGlobalMemoryStatus(refMEMORY_INFOmeminfo);
///
///取得系统时间
///
///
[DllImport("kernel32")]
publicstaticexternvoidGetSystemTime(refSYSTEMTIME_INFOstinfo);
publicComputerInfo()
{
}
}
//定义CPU的信息结构
[StructLayout(LayoutKind.Sequential)]
publicstructCPU_INFO
{
publicuintdwOemId;
publicuintdwPageSize;
publicuintlpMinimumApplicationAddress;
publicuintlpMaximumApplicationAddress;
publicuintdwActiveProcessorMask;
publicuintdwNumberOfProcessors;
publicuintdwProcessorType;
publicuintdwAllocationGranularity;
publicuintdwProcessorLevel;
publicuintdwProcessorRevision;
}
//定义内存的信息结构
[StructLayout(LayoutKind.Sequential)]
publicstructMEMORY_INFO
{
publicuintdwLength;
publicuintdwMemoryLoad;
publicuintdwTotalPhys;
publicuintdwAvailPhys;
publicuintdwTotalPageFile;
publicuintdwAvailPageFile;
publicuintdwTotalVirtual;
publicuintdwAvailVirtual;
}
//定义系统时间的信息结构
[StructLayout(LayoutKind.Sequential)]
publicstructSYSTEMTIME_INFO
{
publicushortwYear;
publicushortwMonth;
publicushortwDayOfWeek;
publicushortwDay;
publicushortwHour;
publicushortwMinute;
publicushortwSecond;
publicushortwMilliseconds;
}
运行的效果图如下:
先写到这里吧~呵呵,第一次写教程,经验不足,希望各位提点意见哈~到时再看看有没有必要再继续写一篇。
数据绑定(交叉表)
本来在考虑是否继续写图表控件的使用文章,毕竟,微软自带的例子已经非常详细了,花点时间参考一下基本上可以了解用法和使用特性,不过后来想想,还是写一下咯,抽出其中大家关心的内容,写出其中常用的使用方法,可以省去大家的时间,在需要深入的时候再去详细查看例子,也当是学习笔记吧:
)(BTW:
我也是边学习边写的,因此,写的文章中难免有不足或失误的地方,希望各位朋友指正出来咯,大家一起提高~本文中基本上只会写出最简单常用的功能,复杂的数据操作请参考微软详细的例程)
一.数据源
说到绘制图表,可能很多人的第一反应除了是图表呈现的方式外,更关心的便是数据如何添加,记得在很多年前,哪时要绘制一个数据曲线图,一直找不到好的呈现方式,后来使用了SVG的绘图模式,不过在添加数据的时候可谓吃尽了苦头,毕竟,SVG只是一种描述语言,要动态的实现一个图表的绘制,是非常困难的.对于微软的图表控件,数据添加是一件很简单的方式,它支持多种数据添加方式,如:
∙可以在图表的设计界面,在属性设置窗口中的Series属性下的Points中添加需要的数据.
∙可以在图表的设计界面中,在属性中绑定一个数据源.
∙可以在后台代码中,动态添加数据.
∙可以在后台代码中设置一个或多个数据源,直接绑定到图表中.
在此处,我只着重讲解一下第3,4两点.对于第3点,相对来说比较简单,在后台代码中,找到要添加代码的Series,通过它下面Points的Add、AddXY、AddY等方法,即可以实现数据的添加.例如:
Code
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);
Chart1.Series["Channel2"].Points.AddXY(t,ch2);
}
(注:
代码摘自微软的例子,上例中,Chart1为图表的名字,Channel1、Channel2分别表示两个Series数据序列)
二.绑定数据
先来看看图表控件都支持什么类型的数据绑定,根据官方文档的说法,只要是实现了IEnumerable接口的数据类型,都可以绑定到图表控件中,例如:
DataView,DataReader, DataSet,DataRow,DataColumn,Array,List,SqlCommand,OleDbCommand,SqlDataAdapter,及OleDbDataAdapter对象。
对于开发来说,最常用的还是DataView、DataReader、DataSet、DataRow、Array、List这几种类型了,有几点需要注意一下:
∙图表控件支持多数据源的绑定,例如:
X轴绑定一个数据集ds1,Y轴可以绑定另一个数据集ds2,当然也可以是X轴绑定到一个List数据对象,Y轴绑定到一个DataView对象等等。
∙图表控件的绑定方式一般有两种,常规绑定及交差表的绑定。
∙图表控件的Y轴数据,支持一次绑定多个值,以绘制时间、区域、使用量等之类的图形。
绑定数据的流程如下:
大意是,绑定数据里面是否有分组数据需要绑定,如果有,则调用交叉表绑定的方法。
否则判断是否时绑定X轴和Y轴(包括标签、超链接、图例文字等自定义属性),如果是,则调用Points.DataBind方法进行绑定操作。
再判断是否有不同的X轴或Y轴数据,如果有,则分别调用X,Y轴的绑定方法Points.DataBindX,Points.DataBindY进行数据绑定。
最后,再判断是否需要进行多个Y轴值的绑定。
下面分别对几种数据绑定的方法进行一下说明:
1.绑定一张数据表
绑定一张数据表,例如绑定一张普通的数据表,表数据如下:
REPS
ID
Name
RegionID
Sales
1
Aaron
1
10440
2
Larry
2
17772
3
Andrew
3
23880
4
Mary
1
7663
5
Sally
4
21773
6
Nguyen
2
32294
7
Francis
4
11983
8
Jerry
3
14991
绑定方法的代码:
Code
stringmySelectQuery="SELECTName,SalesFROMREPS;";
OleDbConnectionmyConnection=newOleDbConnection(myConnectionString);
OleDbCommandmyCommand=newOleDbCommand(mySelectQuery,myConnection);
myCommand.Connection.Open();
OleDbDataReadermyReader=myCommand.ExecuteReader(CommandBehavior.CloseConnection);
Chart1.DataBindTable(myReader,"Name");
myRea
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- MsChart 控件 使用 规范 指南 NET35doc