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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在开发系统的时候有许多数据分析需要用图形的方式来表现出，这样更直观又清淅。如果我们使用高级去动态
生成统计图表的话不但编写起来非常困难，而且实用性不是很好，从美观的角度上讲也是很设计的。然而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
            {
                if (value <= 0)
                    bgdistance = 10;
                else
                    bgdistance = value;
            }
        }

        /// <summary>
        /// 柱子的宽度
        /// </summary>
        public int ZhuWidth
        {
            get { return zhuWidth; }
            set { zhuWidth = value; }
        }

        /// <summary>
        /// 柱子的颜色
        /// </summary>
        public string LineColor
        {
            get { return lineColor; }
            set { lineColor = value; }
        }

        /// <summary>
        /// Y轴方向的间距
        /// </summary>
        public int YItemWidth
        {
            get { return yItemWidth; }
            set { yItemWidth = value; }
        }
        /// <summary>
        /// X轴标识
        /// </summary>
        public string XSign
        {
            get { return xSign; }
            set { xSign = value; }
        }
        /// <summary>
        /// Y轴标识
        /// </summary>
        public string YSign
        {
            get { return ySign; }
            set { ySign = value; }
        }
        /// <summary>
        /// 数据源(柱子高度)
        /// </summary>
        public List<VmlDataSource> DataSource
        {
            get { return datasource; }
            set { datasource = value; }
        }

        #endregion
判断是画柱图还是饼图.
   //画VML图
        StringBuilder sbText = new StringBuilder();
        string strHeight = "";
        string strTop = "";

        public void DrawVml()
        {

            if (isdrawVML == true)
            {//
                if (isZhuOrBing== IszhuOrBing.Bing)
                {
                    DrawBingImage();
                }
                else if (isZhuOrBing == IszhuOrBing.Zhu)
                {
                    DrawZhuImage();
                }
            }
        }
***IsZhuOrBing是一个自定义的枚举类型.

    //柱子一升的脚本
        private string RegisterScript()
        {
            string m_strScript = " <script language='javascript' type='text/javascript'>"
                    +"var gao=0;"
                    +"var ProcID=0;"
                    +"var ProcName=null;"
                    +"var i=0;"
                    +"var HeightContent=document.getElementById('heightDataSource').value;"
                    +"var arrHeight=new Array();"
                    +"var arrTop=new Array();"
                    +"arrHeight=HeightContent.split(',');"
                    +"var showBar=null;"
                    +"function AllPlay()"
                    +"{"
                    +"    i++;"

                    +"    gao=0;"
                    +"   var procBarID='DataZhu'+i;"//;
                    +"    Play(procBarID);    "
                    +"}"
                    +"function Play(procBarID)"
                    +"{    "
                    +"  var procBar=document.getElementById(procBarID);"
                    +"  if(procBar!=null)"
                    +"  {"
                      +"      ProcName=procBar;"
                        +"    PlaySub();"
                        +"}"
                    +"}"
                    +"function PlaySub()"
                    +"{"
                      +"      var procBar=ProcName;"
                        +"    showBar=document.getElementById('ShowData'+i);"
                          +"  showBar.style.display='block';"
                            +"gao++;"
                            +"var ygao=parseInt(procBar.style.height);"
                            +"var ytop=parseInt(procBar.style.top);"
                            +"if(ygao<arrHeight[i-1])"
                            +"{    "
                             +"   procBar.style.top=ytop-gao;"
                              +"  procBar.style.height=ygao+gao;"
                               +" showBar.style.top=ytop-gao-25;"
                                +"setTimeout(PlaySub,20);"
                            +"}"
                            +"else"
                            +"{ "
                              +"  AllPlay();"
                            +"}"
                    +"}"
                    +"</script>";
            return m_strScript;
        }
上面的那段代码是要向客户端注册的JS脚本用于,画柱图时渐长效果的.
开始画VML图
//画柱图.
  public void DrawZhuImage()
        {
                 base.Text = "";
                //画Div
                //sbText.Append("<div style=' border:solid 1px red;width:" + (xwidth+10) + "; height:" + (yheight+10) + ";;filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=true  , color=#66333333 , offX=4 , offY=4 , positive=true );'>");
                sbText.Append("<div id='PicDiv'  style='left:0;position:relative; top:0; width:" + xwidth + "; height:" + yheight + ";text-align:left;'>");
                //base.Style.Value = "left:" + xposition + ";position:relative; top:" + yposition + "; width:" + (xwidth+20) + "; height:" + (20+yheight) + ";'";
                //画X轴
                sbText.Append("<v:line id='Xzhou' from='0," + yheight + "' to='" + xwidth + "," + yheight + "'>"
                    + "<v:stroke  EndArrow='Classic'/></v:line><v:TextBox style='position:absolute; width:100px;top:" + (yheight + 10) + ";left: