<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:新宋体; panose-1:2 1 6 9 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@新宋体"; panose-1:2 1 6 9 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0pt; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} pre {margin:0pt; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:宋体; mso-bidi-font-family:宋体;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} -->
Microsoft Chart 控件是一个图表生成控件。被设计用于 .net framework3.5 版本(及以上)和 vs-2008 环境下运行。
该控件可以用于窗体或 WEB 的数据图形显示。
使用方式:
首先,安装控件后,在工具箱中就会出现 Chart 控件的图标,直接拖至页面需要的部分,即可。或者直接手动输入编码的方式。手动输入时,首先需要向页面注册该程序集。代码类似于:
从注册指令可以看出,这一类的命名空间是 System.Web.UI 的标准命名空间。那么即然 .netframework3.5 集成了 Charting 下的 Chart ,为什么还要安装 Chart 控件呢?
原因是安装时将原程序集文件夹下放置了同一命名空间的 DLL 吗?如果这样,那么原 MSDN 文档中应该没有这一命名空间的说明。
下面是拖入页面方式生成的代码(包括上面的引用)
从上面代码可以看出: Chart 标签部分由两个大的标签构成。 <Series> 和 <ChartAreas>, 目前还不清楚这两部分的意思。
切换到设计面板,如图:
很明显,图中的直方图是没有意义的,因为我们没有给它相应的数据。所以上面的是默认的一种状态。
作为一种控件,当我们会将其加入页面后,就需要知道它有那些属性可以修改其状态,那些方法来处理自己数据。所以,首先得明白控件共开的属性。你可以通过查看其 API 文档获得更详细的说明。但如果英文不好的话,我们就用这种两种方式,选中控件查看其右则属性窗口中的属性列表。或者通过在后台中使用对象点的方法,智能提示会反射出可用的属性和方法。现在打开金山词霸的屏幕取词,一个一个查看属性的名称和说明。
对不明白的属性设置一些值看看效果,以熟悉其使用。在测试前,和微软的其它数据源控件一样, Chart 控件需要一些数据使其显示到页面上,执行设计视图控件上右侧快捷的箭头,添加一个数据源。我添加了一个里面有可运算类型的整个表。可是 Chart 依然没有显示,这说明,它不知道将那些数据用于生成直方图。
现在我一时要找到向那儿填数据还很困难,即使填入正确的数据源和设置,也一时不能确定页面上是怎么显示这些数据的。
所以,打开微软的 DEMO 看他们是在哪儿设置数据源的,从第一页开始看:注意,前面的图引起了我的注意(在 Getting Started->Chart Elements ),图如下:
上面的图是这 Chart 图的结构表示,上面的英文表示不就在属性中也见过吗?没错,属性的设置就是在设置这些部分,现在再回头浏览一下属性列表,是不是有点感觉了。嗯,一会儿我们再去验证这些设置是否如我们所想。
从最基本的开始(代码在 Getting Started->Basic Chart using Code-Behind )。先观察其 HTML 代码:
根据对上面的图的理解,我们很容易筛选出来:<points> 标签中的那几列Y 值是什么意思?如图:
可以肯定它不是在设置某个属性(……),根据 DataPoint 这个词也能大体能猜一点。然后我们在看看整个页面,是乎也找不到其它值,还有 ChartArea 这部分也很难理解。但我们已经有足够的把握说,这个例子中 ChartArea 中没有设置与直方图高度有关的数据。再看看后台,可能令人吃惊的是,后台并没有出现我们期望的那种对 datasource 或什么 databind 方法的调用。但这段代码很眼熟,因为 HTML 中也有它的设置:
它在设置 Points 的集合的什么东东。从说明中可以看出它就是控件正在使用的数据。那 HTML 中的是什么呢?试一下,将后台或前台的取掉看。嗯,在删之前先看看自己要删除的是什么, Series 在图中似乎表示一个长方形。在例图中它所有的长方形。所以这个节点不能删除,的确删除后就没图了……。那就将 point 节点删除看看,不难发现,图发生变化了,运行一下,没数据。现在可以确定,这个设置了高度。接下来我们将后台的 points addY 删除看看。发现曲线不见了,这说明,这组方法在设置曲线的点。
现在,我们的收获是, Series 节点下(后台生成的 Series 对象)下的 points 集合就是确定直方图或曲线图的数据。现在我们先不管什么一个是曲线一个是直方图。呵呵,这当然与它在那儿设置了显示方式了。
为此,我们将在后台,用数据源填充这个集合来显示我们的数据。
我相信你一定成功了吧,如果没有,
想必你早已经发现了,在 Series 集合中,一个通过页面标签的方式画了一个直方图,一个通过后台完成了一个曲线图。相互并不影响。在 Series 集合中,放置的就是这些分组数据的单个图形。你可以向这个集合添加多个图象显示,现在,请在原图基础上分别使用两种方式,再加一个直方图来显示另一组数据。
后台的基本知道是什么了,现在页面上好像还有一部分代码比较疑惑
< ChartAreas >
< asp : ChartArea Name ="ChartArea1" BorderColor ="64, 64, 64, 64" BorderDashStyle ="Solid" BackSecondaryColor ="black" BackColor ="64, 165, 191, 228" ShadowColor ="Transparent" BackGradientStyle ="TopBottom">
< area3dstyle Rotation ="10" perspective ="10" Inclination ="15" IsRightAngleAxes ="False" wallwidth ="0" IsClustered ="False"></ area3dstyle >
< axisy linecolor ="64, 64, 64, 64">
< labelstyle font ="Trebuchet MS, 8.25pt, style=Bold" />
< majorgrid linecolor ="64, 64, 64, 64" />
</ axisy >
< axisx linecolor ="64, 64, 64, 64">
< labelstyle font ="Trebuchet MS, 8.25pt, style=Bold" />
< majorgrid linecolor ="64, 64, 64, 64" />
</ axisx >
</ asp : ChartArea >
</ ChartAreas >
这是做什么的?选全部删除看看。不难发现,删除后界面没图了,这就说明 ChartArea
就是类似于一种画布,数据图就是“画”在它的上面。为了证明这一点,我们将这个标签的背景色改下试试。没错吧。那 < axisy 是什么呢?去掉一个试试,我们发现“画”布上的背景线变化了,很容易知道,一个是表示横坐标线,一个是 X 坐标线, axis 为“轴”的意思,所以axisx 是X 轴,axisy 是Y 轴。 现在请将 X 线改为蓝色,将 Y 线改为黄色。