ASP.NET图形开发带超链接的饼图

时间:2008-07-04 06:03:16  来源:  作者:  【背景色 】

　　软件设计

　　文档对象模型

　　饼图是一种很常见的展示数据的方式，使用文档对象模型的软件设计思想来分析这个饼图形状，可以很容易的知道，饼图可以抽象为饼图对象本身和饼图项目。

　　饼图对象可以定义整体饼图的位置和大小，它的边界就是包含整个饼图的椭圆的外切矩形，而且饼图对象是个容器，可以容纳若干个饼图项目。

　　饼图项目定义单个扇形区域，包括饼图项目对应的数值，提示文本，超链接地址，扇形区域的起始角度和终止角度。

　　程序结构设计

　　该软件应用到ASP.NET中，在桌面程序和WEB程序中应用图形编程具有很大的差别，WEB程序没有视图控件的概念，通常是采用服务器端生成包含图形的图片文档来显示图形，由于WEB程序底层的HTTP传输协议是无状态的，因此程序结构比较复杂，其结构如图所示

　　在这里，采用服务器端生成包含图形的图片来显示图形。由于HTML页面是纯文本的文档，不能包含图片文档等二进制数据，因此必须采用至少两个页面来配合显示包含图文的页面，其中主页面来显示HTML文档，而图片服务页面则专门来生成图片文档。

　　在这里说明一下程序的流程，首先客户端浏览器向主页面发出请求，该页面中需要显示图形，于是生成一个图形文档对象，向这个图形文档对象填充数据，然后根据图形文档对象和图片服务页面的接口来生成专门显示图片的HTML代码，同时还得讲图片文档对象放入到一个临时数据容器中，最常用的就是session容器。

　　主页面处理完成后将生成的HTML文档发送到客户端浏览器，浏览器解析HTML 文档，并根据其引用的图片URL向服务器端的图片服务页面发送请求，最常见的就是IMG元素的SRC属性。图片服务页面根据URL中的参数从临时数据容器中获得图形文档对象，从中获得图像数据，然后转发到浏览器，浏览器获得图像数据后才能完整的展示主页面生成的HTML文档。

　　整个过程比较复杂，需要对HTTP和HTML有比较深的了解。

　　当然我们可以去掉图片服务页面，在主页面中生成图片，然后将图片保存到一个临时文件中，这样做不甚合理，需要开放WEB程序访问服务器文件系统的权限，而且图片文件是比较大的，占磁盘空间，需要及时删除，而如何删除这些临时文件也是一个问题。而采用图片服务页面是在内存中生成图像文档的，不用写临时文件，这样做方便网站的维护。

　　软件代码说明

　　根据软件设计，使用VS.NET2003开发出这样的程序，现对该程序代码进行详细说明。首先说明一下饼图文档对象模型。

　　饼图项目对象 PieShapeItem

　　本类型定义了饼图中的一个项目，代码如下

/// <summary> 
/// 单个饼图形状项目 
/// </summary> 
/// <remarks>该类型是PieShape列表的成员类型</remarks> 
[System.Serializable()] 
public class PieShapeItem 
{ 
    private double dblValue = 0 ; 
    /// <summary> 
    /// 数值 
    /// </summary> 
    public double Value 
    { 
        get{ return dblValue ;} 
        set{ dblValue = value;} 
    } 
    private string strText = null; 
    /// <summary> 
    /// 对象文本 
    /// </summary> 
    public string Text 
    { 
        get{ return strText ;} 
        set{ strText = value;} 
    } 
    private string strLink = null; 
    /// <summary> 
    /// 项目链接地址 
    /// </summary> 
    public string Link 
    { 
        get{ return strLink ;} 
        set{ strLink = value;} 
    } 
    private Color intColor = Color.Black ; 
    /// <summary> 
    /// 项目颜色 
    /// </summary> 
    public Color Color 
    { 
        get{ return intColor ;} 
        set{ intColor = value;} 
    } 
    /// <summary> 
    /// 开始角度 
    /// </summary> 
    internal float StartAngle = 0 ; 
    /// <summary> 
    /// 结束角度 
    /// </summary> 
    internal float EndAngle = 0 ; 
}//public class PieShapeItem