注册 登录
> ASP.NET

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

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

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

最近我们也要做一个数据统计图表，我想如果能把VML画图做成一个控件那该多很，做自定义控件（本人才疏学浅）我不怎么会做，但我们公司有个.NET很牛 的人，我经常看到他重写.net里自带的控件使这些控件变得更好用,于是我也产生一种想法,看能不能把VML也嵌套进去.结果做的还是有点起色.下面跟大 家分享一下.
我是把VML图表用Lable控件显示出来的,给Lable类添加了一些自定义属性.（在下面的代码里面有的属性还没有用到用与以后扩展）
页面代码如下
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--> <% @PageLanguage = " 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:solid2px#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代码部分
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--> 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 IszhuOrBingisZhuOrBing;
private int radii; // 画饼图要用的半径

public IszhuOrBingIsZhuOrBing
{
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图
StringBuildersbText = 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 = " <scriptlanguage='javascript'type='text/javascript'> "
+ " vargao=0; "
+ " varProcID=0; "
+ " varProcName=null; "
+ " vari=0; "
+ " varHeightContent=document.getElementById('heightDataSource').value; "
+ " vararrHeight=newArray(); "
+ " vararrTop=newArray(); "
+ " arrHeight=HeightContent.split(','); "
+ " varshowBar=null; "
+ " functionAllPlay() "
+ " { "
+ " i++; "

+ " gao=0; "
+ " varprocBarID='DataZhu'+i; " // ;
+ " Play(procBarID); "
+ " } "
+ " functionPlay(procBarID) "
+ " { "
+ " varprocBar=document.getElementById(procBarID); "
+ " if(procBar!=null) "
+ " { "
+ " ProcName=procBar; "
+ " PlaySub(); "
+ " } "
+ " } "
+ " functionPlaySub() "
+ " { "
+ " varprocBar=ProcName; "
+ " showBar=document.getElementById('ShowData'+i); "
+ " showBar.style.display='block'; "
+ " gao++; "
+ " varygao=parseInt(procBar.style.height); "
+ " varytop=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("<divstyle='border:solid1pxred;width:"+(xwidth+10)+";height:"+(yheight+10)+";;filter:progid:DXImageTransform.Microsoft.DropShadow(enabled=true,color=#66333333,offX=4,offY=4,positive=true);'>");
sbText.Append( " <divid='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:lineid='Xzhou'from='0, " + yheight + " 'to=' " + xwidth + " , " + yheight + " '> "
+ " <v:strokeEndArrow='Classic'/></v:line><v:TextBoxstyle='position:absolute;width:100px;top: " + (yheight + 10 ) + " ;left: " + (xwidth) + " '> " + xSign + " </v:TextBox> " );
// 画X轴方向的线条
int HaveData = ComputeX(xwidth);
// if(HaveData==0)
// {
// sbText.Append("</div>");
// base.Text=sbText.ToString(0,sbText.Length);
// return;
// }
// 画Y轴
sbText.Append( " <v:lineid='Yzhou'from='0, " + yheight + " 'to='0,0'><v:strokeEndArrow='Classic'/><v:TextBoxstyle='width:100px;padding-left:10px;'> " + ySign + " </v:TextBox></v:line> " );
// 画Y轴方向的线条
ComputeY(yheight);

// 画DIV结束标记
sbText.Append( " </div> " );
// 画隐形文本框
sbText.Append( " <inputtype='hidden'value=' " + strHeight.Substring( 0 ,strHeight.Length - 1 ) + " 'name='heightDataSource'id='heightDataSource'/> " );
sbText.Append( " <inputtype='hidden'value=' " + strTop.Substring( 0 ,strTop.Length - 1 ) + " 'name='topDataSource'id='topDataSource'/> " );
// 给Lable控件的Text赋值
base .Text = sbText.ToString( 0 ,sbText.Length);
Page.RegisterStartupScript( " zhuup " ,RegisterScript());
}
//
private int ComputeX( int XWidth)
{ // 柱子颜色数组
string [,]ZColor = new string [ 6 , 2 ];
ZColor[ 0 , 0 ] = " #666699 " ;ZColor[ 0 , 1 ] = " #d9d9e5 " ;
ZColor[ 1 , 0 ] = " #00ff00 " ;ZColor[ 1 , 1 ] = " #d1ffd1 " ;
ZColor[ 2 , 0 ] = " #ff0000 " ;ZColor[ 2 , 1 ] = " #ffbbbb " ;
ZColor[ 3 , 0 ] = " #ff9900 " ;ZColor[ 3 , 1 ] = " #ffe3bb " ;
ZColor[ 4 , 0 ] = " #33cccc " ;ZColor[ 4 , 1 ] = " #cff4f3 " ;
ZColor[ 5 , 0 ] = " #993300 " ;ZColor[ 5 , 1 ] = " #ffc7ab " ;

XWidth -= 10 ; // 箭头下面的长度

int ColorIndex = 0 ;
double height = 0 ;
int Zhuposition = 0 ;
int Count = this .DataSource == null ? XWidth: this .DataSource.Count;
int num = 1 ;
// Count=0;
// if(Count==0)
// {
// sbText.Append("<divstyle='font-size:14px;color:red;'>暂无数据</div>");
// return0;
// }
int UnitLength = XWidth / Count; // 计算单位长度
foreach (VmlDataSourcevar in this .datasource)
{
// 画X轴下标
sbText.Append( " <v:linefrom=' " + num * UnitLength + " , " + yheight + " 'to=' " + num * UnitLength + " , " + (yheight + bgdistance) + " '> "
+ " </v:line><v:shapestyle='left: " + (num * UnitLength - 50 ) + " ;top: " + yheight + " ;'><v:textbox> " + var.Key + " </v:textbox></v:shape> " );

height = var.value;
Zhuposition = ((num - 1 ) * UnitLength + UnitLength / 2 ) - (zhuWidth / 2 );

if (ColorIndex >= ZColor.Length / 2 )
{
ColorIndex = 0 ;
}
// sbText.Append("<v:rectid='DataZhu"+num+"'style='z-index:1;position:absolute;top:"+(yheight-height)+";"
sbText.Append( " <v:rectid='DataZhu " + num + " 'style='z-index:1;position:absolute;top: " + yheight + " ; "
+ " left: " + Zhuposition + " ;width: " + zhuWidth + " ;height:0;'fillcolor=' " + ZColor[ColorIndex, 0 ] + " '> "
+ " <v:fillcolor2=' " + ZColor[ColorIndex, 1 ] + " 'rotate='t'type='gradient'/> "
+ " <v:extrusionv:ext='view'backdepth=' " + ( 2 * bgdistance) + " 'color=' " + ZColor[ColorIndex, 0 ] + " 'brightness='0.2'on='t'/></v:rect> "
+ " <v:TextBoxid='ShowData " + num + " 'style='position:absolute;display:none;z-index:2;top: " + (yheight<
分享到：
| 正则表达式 零拾
评论
发表评论

您还没有登录,请您登录后再发表评论

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论