65.9K
CodeProject 正在变化。 阅读更多。
Home

3D 饼图 Web 控件

Thulasee Shan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (16投票s)

2010 年 4 月 8 日

CPOL

3分钟阅读

viewsIcon

56893

downloadIcon

2170

使用 Julijan Sribar 模型的 3D 饼图 ASP.NET 服务器控件

引言

尽管 Microsoft Chart Controls 更加优秀和流行，但它们仅适用于 Microsoft .NET Framework 3.5 或更高版本。但感谢 Julijan Sribar 提供的适用于 Windows Form 的精彩的 3D 饼图控件。我将他的 Windows Form 控件转换为 ASP.NET 服务器控件，没有对他核心架构做太多更改。因此，我们现在为 ASP.NET 2.0 开发人员提供了一个有用的 3D 饼图。我相信 Framework 2.0 的开发人员比任何其他 .NET Framework 的开发人员都多，我认为为这些多数 .NET 开发人员编写一个漂亮的 3D 饼图控件是值得的。

Screen.gif

起源

如上所述，这个项目是对 Julijan Sribar 的 3D 饼图控件的微小修改。要更深入地了解此 3D 饼图的实现方式，请参考 Julijan Sribar 的 原始文章“3D 饼图”。

有哪些变化？

没有太大变化！添加了 2 个新类并修改了主 PieChartControl.cs。

PieChartControl.cs

  1. 移除了来自 Windows Form Panel 的继承
  2. 移除了鼠标函数，因为它们与 Web 环境无关
  3. 使 DoDraw() 函数在 Bitmap 上绘图，而不是在 Panel Canvas 上绘图
  4. 移除了 Tooltip 属性，并在 Pie3DWebControl.cs 中实现
  5. 添加了一个新属性以返回 PieSlices，以便创建图像映射锚点
  6. 添加了 Font 和 ForeColor 属性以设置文本属性

PieChart.cs

  1. 使 PieSlices 对外部成员可见，以便创建图像映射锚点

PieSlice.cs

  1. 具有一个新属性，该属性提供弧形区域 - 这使得创建精确的图像映射成为可能
    public GraphicsPath ArcPath
{
    get {
        GraphicsPath arcPath = new GraphicsPath();
        arcPath.AddPie(m_boundingRectangle.X, m_boundingRectangle.Y,
            m_boundingRectangle.Width, m_boundingRectangle.Height,
            (float)m_startAngle, (float)m_sweepAngle);
        return arcPath;
    }
}

Pie3DWebControl.cs

  1. ASP.NET 服务器控件包装器
  2. 将逗号分隔的字符串转换为数组
    public string Values
{
    get {return string.Join(",", Array.ConvertAll<decimal,>(
        m_Values, new Converter<decimal,>(Convert.ToString)));}
    set {m_Values = Array.ConvertAll<string,>(
        value.Split(",".ToCharArray(),
        StringSplitOptions.RemoveEmptyEntries),
        new Converter<string,>(Convert.ToDecimal));}
}
  3. 易于使用的 ASP.NET 控件
    <cnt:PieChart3D 
    runat="server" 
    id="ChartControl1" 
    Links="http://www.mozi...,http://www.microsoft..,http://www.google...,
            http://www.apple...,http://www.opera..."
    Colors="orange,blue,yellow,purple,red"
    Values="46.5,35.3,11.6,3.8,2.1"
    Texts="Firefox,Internet Explorer,Google Chrome,Safari,Opera" 
    SliceDisplacments="0.05,0.05,0.4,0.05,0.05"
/>

IeImgHandler.cs

为了减少对服务器的回调次数并避免临时存储，我使用了 数据 URI 方案技术，将图像存储在 HTML 本身中。但 Internet Explorer 7 和更早版本不支持此功能，而 Internet Explorer 8 支持，但将图像大小限制为不超过 32K。为了解决这种不兼容性，如果用户代理是 Internet Explorer，我使用了老式的临时存储机制。

//NOTE: This code is in Pie3DWebControl.cs
if (Page.Request.Browser.IsBrowser("IE"))
{
    Context.Session[m_ChartImg.ClientID] = oMem.ToArray();
    m_ChartImg.Src = "_getchart.aspx?imgId=" + m_ChartImg.ClientID;
}
else
    m_ChartImg.Src = "data:image/png;base64," + 
                    Convert.ToBase64String(oMem.ToArray(),
                    Base64FormattingOptions.None);

如上所示，如果客户端浏览器是 Internet Explorer，PNG 图像将存储在具有唯一 ID 的 Session 中，并且 Internet Explorer 会在单独的请求中获取它。为了处理此请求，实现了 httpHandler 来处理来自 '_getchart.aspx' 的请求，而无需物理文件。处理 _getchart.aspx 的请求是此类的功能，它实现了 System.Web.IHttpHandler 和 System.Web.SessionState.IRequiresSessionState 接口。

  • System.Web.IHttpHandler：定义 ASP.NET 用于使用自定义 HTTP 处理程序同步处理 HTTP Web 请求的契约。
  • System.Web.SessionState.IRequiresSessionState：指定目标 HTTP 处理程序需要对会话状态值进行读写访问。这是一个标记接口，没有方法。
public void ProcessRequest(System.Web.HttpContext context)
{
    context.Response.Clear();
    context.Response.Cache.SetExpires(DateTime.Now.AddDays(1));
    context.Response.Cache.SetValidUntilExpires(true);
    context.Response.Cache.SetCacheability(System.Web.HttpCacheability.Public);
    context.Response.Cache.AppendCacheExtension("post-check=900, pre-check=3600");
    context.Response.ContentType = "image/png";
    context.Response.BinaryWrite((byte[])System.Web.HttpContext.Current.Session[
                                    context.Request["imgId"]]);
}

如何使用此控件？

下载并编译 PieChart3DWebcontrol 项目后...

  1. 创建 Web 项目 / 或打开您现有的 Web 项目
  2. 添加对 PieChart3DWebcontrol.dll 的引用
  3. 打开 web.config 并在 <system.web> 下添加以下行
    <httpHandlers>
    <add verb="*" path="_getchart.aspx" 
      type="WebControl.IeImgHandler,PieChart3DWebcontrol" />
</httpHandlers>

    此行用于通过 IeImgHandler 处理传入 '_getchart.aspx' 的请求 - 正如本文前面所解释的那样。

  4. 打开您要插入控件的 aspx 页面，并在顶部注册该控件。
    <%@ Register Namespace="System.Drawing.PieChart.WebControl" 
    Assembly="PieChart3DWebcontrol" 
    TagPrefix="cnt" %>
  5. 最后插入控件
    <cnt:PieChart3D 
    runat="server" 
    id="chart1" <!-- control id -->
    Width="500" <!-- (int) Width of the chart Default:400 -->
    Heght="300" <!-- (int) Height of the chart Default:200 -->
    Values="10,11.5,23.23,30.567" <!-- (float array) Comma separated values to 
                                     plot chart-->
    Texts="aaaaa,bbbbbb,cccccc,ddddd" <!-- (string array) 
				Comma separated strings to 
                                     label each segment-->
    Links="http://www.aaa.com,http://www.bbb.com..." <!-- (string array) Comma 
                                     separated string - links for each segment-->
    Colors="blue,red,#3388FA..." <!-- (string array) Comma separated string - 
                                    colours for each segment -->
    SliceDisplacments="0.05, 0.1, 0.05..." <!-- (float array) 
					comma separated length 
                                              of displacement for each segment-->
    Opacity="150" <!-- (int) Transparency level of all segments, Default: 160-->
    ShadowStyle="GradualShadow" <!-- NoShadow/UniformShadow/GradualShadow - 
                                    Default:GradualShadow  -->
    EdgeColorType="DarkerThanSurface" <!-- NoEdge/SystemColor/SurfaceColor/
             DarkerThanSurface/DarkerDarkerThanSurface/LighterThanSurface/
             LighterLighterThanSurface/Contrast/EnhancedContrast/FullContrast 
                       - Default:DarkerThanSurface -->
    FontFamily="Arial" <!-- (string) Font name Default:Verdana-->
    FontSize="12" <!-- (int) Font size Default: 10 -->
    FontStyle="Bold" <!-- Regular/Bold/Italic/Underline/Strikeout -->
    ForeColor="#cceedd" <!-- (string) Label color, Default: Black -->
/>

历史

  • V 1.00 - 2010 年 4 月 8 日 15:00 - 首次提交
© . All rights reserved.