asp.net中用VML动态的画出数据分析图表详解.

最新推荐文章于 2024-10-17 17:22:38 发布

shanliwa

最新推荐文章于 2024-10-17 17:22:38 发布

阅读量1k

点赞数

分类专栏： Asp.net 文章标签：数据分析 asp.net colors string textbox behavior

本文链接：https://blog.csdn.net/shanliwa/article/details/1803069

版权

本文介绍了如何在ASP.NET中利用VML（Vector Markup Language）动态绘制数据分析图表，包括柱状图和饼图。通过自定义Label控件添加属性，实现从数据库获取数据并动态展示统计内容。文章提供了详细的代码示例，展示了如何设置X轴、Y轴、颜色等参数，并通过JavaScript实现渐变效果。

摘要由CSDN通过智能技术生成

在开发系统的时候有许多数据分析需要用图形的方式来表现出，这样更直观又清淅。如果我们使用高级去动态
生成统计图表的话不但编写起来非常困难，而且实用性不是很好，从美观的角度上讲也是很设计的。然而Microsoft公司提供了一个专们的矢量画图语言，这就是VML.

如果要用VML去画静态页面的话那是比较好看也好操作，但实用性不是很高。但要是画出来的图所表示的数据
是从数据库里面读取下来的可以动态表示要统计的内容的话，那实用性就不言而喻了。

最近我们也要做一个数据统计图表，我想如果能把VML画图做成一个控件那该多很，做自定义控件（本人才疏学浅）我不怎么会做，但我们公司有个.NET很牛的人，我经常看到他重写.net里自带的控件使这些控件变得更好用,于是我也产生一种想法,看能不能把VML也嵌套进去.结果做的还是有点起色.下面跟大家分享一下.

我是把VML图表用Lable控件显示出来的,给Lable类添加了一些自定义属性.（在下面的代码里面有的属性还没有用到用与以后扩展）

页面代码如下

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " DrawTest.aspx.cs " Inherits = " DrawTest " %>

< html xmlns:v ="urn:schemas-microsoft-com:vml" xmlns:o ="urn:schemas-microsoft-com:office:office"
    xmlns ="http://www.w3.org/1999/xhtml" >
< head id ="Head1" runat ="server" >
     < title > Page </ title >
     < style type ="text/css" >
v/:* { behavior : url(#default#VML) }
o/:* { behavior : url(#default#VML) }
.changeBg { FILTER : progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#9DCDFA) ;
}
.shadwDiv { width : 600px ; height : 500px ; text-align : center ; filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=true  , color=#000 , offX=10 , offY=10 , positive=true ) ; }
</ style >

</ head >
< body >
     < form id ="form1" runat ="server" >
         < div class ="shadwDiv" >
             < div style ="padding-top: 30px; border: solid 2px #BBBBBB; background-color: #EFEFEF;
                width: 600px; height: 500px;" >
                 < asp:VmlLabel ID ="labTest3" runat ="server" XWidth ="400" YHeight ="400" YPosition ="50"
                    IsDrawVML ="True" BgDistance ="10" EnableViewState ="False" ZhuWidth ="20" YItemWidth ="40"
                    CssClass ="changeBg" BorderColor ="White" BorderWidth ="0px" LineColor ="#4CAFFE"
                    XSign ="(年份)" YSign ="(万/单位)" XPosition ="50" IsZhuOrBing ="Zhu" Redii ="80" ></ asp:VmlLabel >
             </ div >
         </ div >
     </ form >
</ body >
</ html >

这里面的.<html>标签里的” xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"

”和. v/:*{ behavior: url(#default#VML) }

o/:*{ behavior: url(#default#VML) }

是必不可少的.

下面是CS代码部分

private int xposition;
         private int yposition;
         private int xwidth;
         private int yheight;
         private bool isdrawVML;
         private int bgdistance; // 背景距离（斜线之间的垂直距离）
         private int zhuWidth;
         private string lineColor;
         private int yItemWidth;
         private string xSign; // X轴标记
         private string ySign; // Y轴标记
         private List < VmlDataSource > datasource;
         private IszhuOrBing isZhuOrBing;
         private int radii; // 画饼图要用的半径

         public IszhuOrBing IsZhuOrBing
        {
             get { return isZhuOrBing; }
             set { isZhuOrBing = value; }
        }
         #region 属性的定义

         /// <summary>
         /// 画饼图的半径
         /// </summary>
         public int Redii
        {
             get { return radii; }
             set { radii = value; }
        }
         /// <summary>
         /// X轴的位置
         /// </summary>
         public int XPosition
        {
             get { return xposition; }
             set { xposition = value; }
        }

         /// <summary>
         /// Y轴位置
         /// </summary>
         public int YPosition
        {
             get { return yposition; }
             set { yposition = value; }
        }
         //
         /// <summary>
         /// X轴宽度
         /// </summary>
         public int XWidth
        {
             get { return xwidth; }
             set { xwidth = value; }
        }
         //
         /// <summary>
         /// Y轴高度
         /// </summary>
         public int YHeight
        {
             get { return yheight; }
             set { yheight = value; }
        }
         /// <summary>
         /// 是否是画VML图
         /// </summary>
         public bool IsDrawVML
        {
             get { return isdrawVML; }
             set { isdrawVML = value; }
        }
         /// <summary>
         /// 背景距离（斜线之间的垂直距离）
         /// </summary>
         public int BgDistance
        {
             get
            {
                 return bgdistance;
            }
             set