Chart图表入门

最新推荐文章于 2023-08-24 16:27:32 发布

lffxgthmhfy

最新推荐文章于 2023-08-24 16:27:32 发布

阅读量1.3k

点赞数

文章标签： behavior microsoft html url 图形文档

本文链接：https://blog.csdn.net/lffxgthmhfy/article/details/5074266

版权

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 线改为黄色。

lffxgthmhfy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chart图表入门

v/:* {behavior:url(#default#VML);}o/:* {behavior:url(#default#VML);}w/:* {behavior:url(#default#VML);}.shape {behavior:url(#default#VML);} Normal 0 7.8 磅 0 2
复制链接

扫一扫