微软Chart图表控件在数字油田中的应用-数字油田项目部.doc

微软Chart图表控件在数字油田中的应用肖铁数字油田项目部摘 要：深入研究Chart控件的用法，结合数字油田管理信息系统的需要，研究Chart控件的属性的用法，从而更好的把数据展现给用户。文中介绍Chart控件的概述分析了Chart控件在数字油田中的具体应用。关键词：Chart；数字油田；图表1 Chart控件简介Chart控件是一款功能非常强大的绘制图表的.NET控件，基本上可以支持各种各样的图形显示，常见的：点状图、饼图、柱状图、曲线图、面积图、排列图等等，同时也支持3D样式的图表显示。不过最有用的功能还是支持图形上各个点的属性操作，它可以定义图形上各个点、标签、图形的提示信息（Tooltip）以及超级链接、JavaScript动作等，而不是像其它图形类库仅生成一幅图片而已，通过这些，加上微软自己的Ajax框架，可以建立一个可以互动的图形统计报表了。2 Chart控件的功能Chart 控件支持下列功能：l 真实的三维表示形式。l 支持所有主要的图表类型。l 通过随机数据和数据数组填充数据网格。Chart 控件与数据网格（Data Grid 对象）关联。该数据网格是保存要绘制的数据的表。数据网格还可以包括用于标识图表上的系列和类别的标签。图表应用程序的设计者通过插入数据或通过从电子表格或数组导入数据，用信息填充数据网格。3 Chart控件的组成整个图形控件主要由以下几个部份组成:1.Annotations -图形注解集合2.ChartAreas -图表区域集合3.Legends -图例集合4.Series -图表序列集合（即图表数据对象集合）5.Titles -图标的标题集合4 结合数字油田的应用对Chart控件属性进行深入研究31 Annotations注解集合: Annotations是一个对图形的一些注解对象的集合，所谓注解对象，类似于对某个点的详细或者批注的说明，比如，数字油田项目中的2010年庆新油田的计划产量与实际产量对比图如下所示一个图形上可以拥有多个注解对象，可以添加十多种图形样式的注解对象，包括常见的箭头、云朵、矩行、图片等等注解符号，通过各个注解对象的属性，可以方便的设置注解对象的放置位置、呈现的颜色、大小、文字内容样式等常见的属性。32 ChartAreas图表区域集合:ChartAreas可以理解为是一个图表的绘图区，每个绘图区有一个坐标轴，如果两组数据的X轴或Y轴是同一种数据类型则可以放到一个绘图区中，例如下图的庆新油田产量对比图：如果不是一种数据类型则不能放入一个绘图区中，例如功率图和产量曲线就不能放入一个ChartAreas中。 当然了，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进行添加。对于每一个绘图区域，你可以设置各自的属性，如：X,Y轴属性、背景等。33 Legends图例集合:Legends是一个图例的集合，即标注图形中各个线条或颜色的含义，同样，一个图片也可以包含多个图例说明，这个属性非常有用，再做油、水井、计量间和环的历史数据查询功能时，需要根据用户的选择画出相应的曲线，这是就需要图例对多条曲线的意义进行解释，方便用户的查看。具体效果如下图所示:34 Series图表序列:图表序列，应该是整个绘图中最关键的内容了，通俗点说，即是实际的绘图数据区域，实际呈现的图形形状，就是由此集合中的每一个图表来构成的，可以往集合里面添加多个图表，每一个图表可以有自己的绘制形状、样式、独立的数据等。每一个图表，你都可以指定它的绘制区域，让此图表呈现在某个绘图区域，也可以让几个图表在同一个绘图区域叠加，如下图：35 Titles标题合集:Titles是图表的标题配置，同样可以添加多个标题，以及设置标题的样式及文字、位置等属性。36 Chart控件的特殊属性相对来说，我觉得比较有用的属性有三个，分别是：Label、Tooltip以及URL链接。Label即标签的含义，可以在图片的关键位置进行一些关键数字或文字的描述，如下图：像上图：X轴和Y轴的文字便是标签，通过对标签进行设置可以设置XY轴的刻度样式，例如日期可以设置成如上图所示的日期，也可以改为2010-12-16的样式，还可以给刻度加上单位等等一系列的功能。使用户的阅读更为舒适，不会因为单位的转换增加阅读的难度。 Tooltip即提示的含义，用于在各个关键点，如：标签、图形关键点、标题等当鼠标移动上去的时候，提示用户一些相关的详细或说明信息，例如上图，可以给曲线中的每一个点增加Tooltip的属性，写上需要详细说明的内容，比如：数字油田管理系统中，那么，在鼠标移动到这个点的时候，会自动弹出详细数据显示,如下图所示Tooltip可以支持简单方式以及自定义的方式，简单方式即像平时Html页面设置的title之类的属性效果，而自定义的方式，则可以实现图形、文本等各种复杂的提示信息显示。详细的方式请参考官方例子的：Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相关例子。URL链接，图表控件中，有一大半的控件都有URL及Tooltip的属性，你可以设置此属性，在鼠标点击的时候，代到其它相应的页面去。5 Chart控件在数字油田项目中的应用Chart控件在数字油田项目中的应用主要是满足绘制各种图表的需要，比如历史数据的查询、示功图的叠加、泵功图的显示等等。11 历史数据的查询与显示历史数据模块要实现的功能是通过选择一些条件，把符合条件的数据画成曲线显示出来，曲线的x轴为日期，如下图所示： 通过设置Chart控件的ToolTip属性把每个日期点都加入鼠标悬停显示数据和URL链接，实现鼠标悬停在某个点的时候把详细的数据显示出来，点击数据点时进入详细数据页面。12 油井示功图叠加显示 通过在一个Chart控件中循环绘图可实现曲线叠加显示的功能，例如示功图叠加。如下图所示：首先要实现这个功能需要写一个函数专门负责在Chart控件上画曲线。由于我们这次项目采用三层架构的新的项目设计方案，所以要把这个函数写到公共类文件中，以方便其他页面的调用。在进行示功图叠加时，首先要让用户选择要叠加查看的数据，根据用户选择的井和时间段，得到该井此时间段内的位移数据包、载荷数据包、功率数据包和电流数据包。以示功图为例，把得到的载荷数据报和位移数据包作为参数和Chart控件的引用、曲线的名称等参数一起传到公共类的曲线绘制函数中去。在曲线绘制函数中，由于得到的数据包是一个字符串，无法画图，所以首先就是对得到的数据包进行处理，把字符串转换成字符串数组，进而才能转换成需要的双精度类型的数组。把位移包放到x轴，载荷包放到y轴，执行Chart控件自带的函数Points.DataBindXY和Points.AddXY画出曲线。Points.DataBindXY函数的作用是把给定的数组数据绑定到Chart控件的中所画曲线的X轴和Y轴，Points.AddXY函数的作用是添加曲线的终点坐标，在此函数的作用是把曲线的终点坐标和起点坐标定为一个从而形成闭合曲线。以上方法实现了一条闭合曲线的绘制，要形成闭合曲线也就是示功图的叠加效果必须把用户所选择的数据全部都绘制到Chart控件中。要实现上述功能需要在用户选择井和时间段后，把符合要求的数据通过GridView列表显示出来，并在每条数据之前添加CheckBox复选框以便于用户选择要查看的数据，如下图所示：当用户点击确定按钮后，程序依次遍历GridView的每行数据，如果某行的CheckBox复选框为选定状态，则一句这行的数据在Chart中绘制一条曲线，每种曲线的颜色不同以便于区分。当然，绘制曲线之前要对数据进行判断，如果不符合要求的数据会提示用户，如下图所示：是用户不会被错误数据所影响。通过以上的方法实现了示功图的叠加显示，使通过用户查询与比较油井示功图，直观的了解油井的状态，方便分析和预警。13 油井泵功图、电流图、功率图显示 在单井监控页面，需要把监控的数据直观的显示给用户，所以就再次用到了Chart控件的图表绘制了。当用户选择要查看的井后，后台以同样的方法得到监控的位移数据包、载荷数据包、功率数据包和电流数据包。通过对数据包进行处理，画出符合用户要求的泵功图、示功图、功率图和电流图，如下图所示：14 Chart控件存储功能功图上报功图上报功能的目的是把今天的所有示功图显示出来，然后让用户选择一个能代表今天实际情况的示功图上报到上级数据库中作为备份。要实现这个功能首先要把今天所有的数据绘制成示功图。实际操作才发现Chart控件不能装入任何Asp的控件容器中，只能装在HTML的容器中。结合以前的经验，决定后台定义Table容器来装载多个Chart控件，深入研究了后台Chart控件属性的定义与设置，最终问题成功解决。面临的第二个问题是把Chart控件转化成二进制图像存入数据库中的难题。经过研究Chart控件的形成和多次实验发现，网页在初始载入时，服务器端是先把Chart在内存中形成为完整的图片格式，然后存入默认的文件夹内，最后在相应的图表位置把图片载入，而不是直接在网页上绘图。有了这个认知，功图上报功能也就相应的解决了。只要后台生成Chart图表时，把形成的图片存储到指定的目录下，定义相应的命名规范。则在用户上报所选的功图时，根据命名规范找到指定的图片，然后转换成二进制文件格式，就可以很容易的上传到服务器上。自此问题顺利解决。实际效果图如下图所示：6 总结通过这段时间对Chart控件的学习和应用，让我学到了很多，使我能熟练的对Chart控件进行一系列的操作和设置，使之能满足很