|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
| |
| asp.net中用VML动态的画出数据分析图表详解 |
|
在开发系统的时候有许多数据分析需要用图形的方式来表现出，这样更直观又清淅。如果我们使用高级去动态 rETLinux联盟
生成统计图表的话不但编写起来非常困难，而且实用性不是很好，从美观的角度上讲也是很设计的。然而Microsoft公司提供了一个专们的矢量画图语言，这就是VML. rETLinux联盟
rETLinux联盟
如果要用VML去画静态页面的话那是比较好看也好操作，但实用性不是很高。但要是画出来的图所表示的数据 rETLinux联盟
是从数据库里面读取下来的可以动态表示要统计的内容的话，那实用性就不言而喻了。 rETLinux联盟
rETLinux联盟
最近我们也要做一个数据统计图表，我想如果能把VML画图做成一个控件那该多很，做自定义控件（本人才疏学浅）我不怎么会做，但我们公司有个.NET很牛 的人，我经常看到他重写.net里自带的控件使这些控件变得更好用,于是我也产生一种想法,看能不能把VML也嵌套进去.结果做的还是有点起色.下面跟大 家分享一下. rETLinux联盟
rETLinux联盟
我是把VML图表用Lable控件显示出来的,给Lable类添加了一些自定义属性.（在下面的代码里面有的属性还没有用到用与以后扩展） rETLinux联盟
rETLinux联盟
页面代码如下 rETLinux联盟
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DrawTest.aspx.cs" Inherits="DrawTest" %> rETLinux联盟
rETLinux联盟
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" rETLinux联盟
xmlns="http://www.w3.org/1999/xhtml"> rETLinux联盟
<head id="Head1" runat="server"> rETLinux联盟
<title>Page</title> rETLinux联盟
<style type="text/css"> rETLinux联盟
v\:*{ behavior: url(#default#VML) } rETLinux联盟
o\:*{ behavior: url(#default#VML) } rETLinux联盟
.changeBg{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#9DCDFA); rETLinux联盟
} rETLinux联盟
.shadwDiv{ width:600px; height:500px; text-align:center; filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=true , color=#000 , offX=10 , offY=10 , positive=true ) ; } rETLinux联盟
</style> rETLinux联盟
rETLinux联盟
</head> rETLinux联盟
<body> rETLinux联盟
<form id="form1" runat="server"> rETLinux联盟
<div class="shadwDiv" > rETLinux联盟
<div style="padding-top: 30px; border: solid 2px #BBBBBB; background-color: #EFEFEF; rETLinux联盟
width: 600px; height: 500px;"> rETLinux联盟
<asp:VmlLabel ID="labTest3" runat="server" XWidth="400" YHeight="400" YPosition="50" rETLinux联盟
IsDrawVML="True" BgDistance="10" EnableViewState="False" ZhuWidth="20" YItemWidth="40" rETLinux联盟
CssClass="changeBg" BorderColor="White" BorderWidth="0px" LineColor="#4CAFFE" rETLinux联盟
XSign="(年份)" YSign="(万/单位)" XPosition="50" IsZhuOrBing="Zhu" Redii="80"></asp:VmlLabel> rETLinux联盟
</div> rETLinux联盟
</div> rETLinux联盟
</form> rETLinux联盟
</body> rETLinux联盟
</html> rETLinux联盟
rETLinux联盟
这里面的.<html>标签里的” xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" rETLinux联盟
rETLinux联盟
”和. v\:*{ behavior: url(#default#VML) } rETLinux联盟
rETLinux联盟
o\:*{ behavior: url(#default#VML) } rETLinux联盟
rETLinux联盟
是必不可少的. rETLinux联盟
rETLinux联盟
下面是CS代码部分 rETLinux联盟
private int xposition; rETLinux联盟
private int yposition; rETLinux联盟
private int xwidth; rETLinux联盟
private int yheight; rETLinux联盟
private bool isdrawVML; rETLinux联盟
private int bgdistance;//背景距离（斜线之间的垂直距离） rETLinux联盟
private int zhuWidth; rETLinux联盟
private string lineColor; rETLinux联盟
private int yItemWidth; rETLinux联盟
private string xSign;//X轴标记 rETLinux联盟
private string ySign;//Y轴标记 rETLinux联盟
private List<VmlDataSource> datasource; rETLinux联盟
private IszhuOrBing isZhuOrBing; rETLinux联盟
private int radii;//画饼图要用的半径 rETLinux联盟
rETLinux联盟
public IszhuOrBing IsZhuOrBing rETLinux联盟
{ rETLinux联盟
get { return isZhuOrBing; } rETLinux联盟
set { isZhuOrBing = value; } rETLinux联盟
} rETLinux联盟
#region 属性的定义 rETLinux联盟
rETLinux联盟
/// <summary> rETLinux联盟
/// 画饼图的半径 rETLinux联盟
/// </summary> rETLinux联盟
public int Redii rETLinux联盟
{ rETLinux联盟
get { return radii; } rETLinux联盟
set { radii = value; } rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// X轴的位置 rETLinux联盟
/// </summary> rETLinux联盟
public int XPosition rETLinux联盟
{ rETLinux联盟
get { return xposition; } rETLinux联盟
set { xposition = value; } rETLinux联盟
} rETLinux联盟
rETLinux联盟
/// <summary> rETLinux联盟
/// Y轴位置 rETLinux联盟
/// </summary> rETLinux联盟
public int YPosition rETLinux联盟
{ rETLinux联盟
get { return yposition; } rETLinux联盟
set { yposition = value; } rETLinux联盟
} rETLinux联盟
// rETLinux联盟
/// <summary> rETLinux联盟
/// X轴宽度 rETLinux联盟
/// </summary> rETLinux联盟
public int XWidth rETLinux联盟
{ rETLinux联盟
get { return xwidth; } rETLinux联盟
set { xwidth = value; } rETLinux联盟
} rETLinux联盟
// rETLinux联盟
/// <summary> rETLinux联盟
/// Y轴高度 rETLinux联盟
/// </summary> rETLinux联盟
public int YHeight rETLinux联盟
{ rETLinux联盟
get { return yheight; } rETLinux联盟
set { yheight = value; } rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// 是否是画VML图 rETLinux联盟
/// </summary> rETLinux联盟
public bool IsDrawVML rETLinux联盟
{ rETLinux联盟
get { return isdrawVML; } rETLinux联盟
set { isdrawVML = value; } rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// 背景距离（斜线之间的垂直距离） rETLinux联盟
/// </summary> rETLinux联盟
public int BgDistance rETLinux联盟
{ rETLinux联盟
get rETLinux联盟
{ rETLinux联盟
return bgdistance; rETLinux联盟
} rETLinux联盟
set rETLinux联盟
{ rETLinux联盟
if (value <= 0) rETLinux联盟
bgdistance = 10; rETLinux联盟
else rETLinux联盟
bgdistance = value; rETLinux联盟
} rETLinux联盟
} rETLinux联盟
rETLinux联盟
/// <summary> rETLinux联盟
/// 柱子的宽度 rETLinux联盟
/// </summary> rETLinux联盟
public int ZhuWidth rETLinux联盟
{ rETLinux联盟
get { return zhuWidth; } rETLinux联盟
set { zhuWidth = value; } rETLinux联盟
} rETLinux联盟
rETLinux联盟
/// <summary> rETLinux联盟
/// 柱子的颜色 rETLinux联盟
/// </summary> rETLinux联盟
public string LineColor rETLinux联盟
{ rETLinux联盟
get { return lineColor; } rETLinux联盟
set { lineColor = value; } rETLinux联盟
} rETLinux联盟
rETLinux联盟
/// <summary> rETLinux联盟
/// Y轴方向的间距 rETLinux联盟
/// </summary> rETLinux联盟
public int YItemWidth rETLinux联盟
{ rETLinux联盟
get { return yItemWidth; } rETLinux联盟
set { yItemWidth = value; } rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// X轴标识 rETLinux联盟
/// </summary> rETLinux联盟
public string XSign rETLinux联盟
{ rETLinux联盟
get { return xSign; } rETLinux联盟
set { xSign = value; } rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// Y轴标识 rETLinux联盟
/// </summary> rETLinux联盟
public string YSign rETLinux联盟
{ rETLinux联盟
get { return ySign; } rETLinux联盟
set { ySign = value; } rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// 数据源(柱子高度) rETLinux联盟
/// </summary> rETLinux联盟
public List<VmlDataSource> DataSource rETLinux联盟
{ rETLinux联盟
get { return datasource; } rETLinux联盟
set { datasource = value; } rETLinux联盟
} rETLinux联盟
rETLinux联盟
#endregion rETLinux联盟
判断是画柱图还是饼图. rETLinux联盟
//画VML图 rETLinux联盟
StringBuilder sbText = new StringBuilder(); rETLinux联盟
string strHeight = ""; rETLinux联盟
string strTop = ""; rETLinux联盟
rETLinux联盟
public void DrawVml() rETLinux联盟
{ rETLinux联盟
rETLinux联盟
if (isdrawVML == true) rETLinux联盟
{// rETLinux联盟
if (isZhuOrBing== IszhuOrBing.Bing) rETLinux联盟
{ rETLinux联盟
DrawBingImage(); rETLinux联盟
} rETLinux联盟
else if (isZhuOrBing == IszhuOrBing.Zhu) rETLinux联盟
{ rETLinux联盟
DrawZhuImage(); rETLinux联盟
} rETLinux联盟
} rETLinux联盟
} rETLinux联盟
***IsZhuOrBing是一个自定义的枚举类型. rETLinux联盟
rETLinux联盟
//柱子一升的脚本 rETLinux联盟
private string RegisterScript() rETLinux联盟
{ rETLinux联盟
string m_strScript = " <script language='javascript' type='text/javascript'>" rETLinux联盟
+"var gao=0;" rETLinux联盟
+"var ProcID=0;" rETLinux联盟
+"var ProcName=null;" rETLinux联盟
+"var i=0;" rETLinux联盟
+"var HeightContent=document.getElementById('heightDataSource').value;" rETLinux联盟
+"var arrHeight=new Array();" rETLinux联盟
+"var arrTop=new Array();" rETLinux联盟
+"arrHeight=HeightContent.split(',');" rETLinux联盟
+"var showBar=null;" rETLinux联盟
+"function AllPlay()" rETLinux联盟
+"{" rETLinux联盟
+" i++;" rETLinux联盟
rETLinux联盟
+" gao=0;" rETLinux联盟
+" var procBarID='DataZhu'+i;"//; rETLinux联盟
+" Play(procBarID); " rETLinux联盟
+"}" rETLinux联盟
+"function Play(procBarID)" rETLinux联盟
+"{ " rETLinux联盟
+" var procBar=document.getElementById(procBarID);" rETLinux联盟
+" if(procBar!=null)" rETLinux联盟
+" {" rETLinux联盟
+" ProcName=procBar;" rETLinux联盟
+" PlaySub();" rETLinux联盟
+"}" rETLinux联盟
+"}" rETLinux联盟
+"function PlaySub()" rETLinux联盟
+"{" rETLinux联盟
+" var procBar=ProcName;" rETLinux联盟
+" showBar=document.getElementById('ShowData'+i);" rETLinux联盟
+" showBar.style.display='block';" rETLinux联盟
+"gao++;" rETLinux联盟
+"var ygao=parseInt(procBar.style.height);" rETLinux联盟
+"var ytop=parseInt(procBar.style.top);" rETLinux联盟
+"if(ygao<arrHeight[i-1])" rETLinux联盟
+"{ " rETLinux联盟
+" procBar.style.top=ytop-gao;" rETLinux联盟
+" procBar.style.height=ygao+gao;" rETLinux联盟
+" showBar.style.top=ytop-gao-25;" rETLinux联盟
+"setTimeout(PlaySub,20);" rETLinux联盟
+"}" rETLinux联盟
+"else" rETLinux联盟
+"{ " rETLinux联盟
+" AllPlay();" rETLinux联盟
+"}" rETLinux联盟
+"}" rETLinux联盟
+"</script>"; rETLinux联盟
return m_strScript; rETLinux联盟
} rETLinux联盟
上面的那段代码是要向客户端注册的JS脚本用于,画柱图时渐长效果的. rETLinux联盟
开始画VML图 rETLinux联盟
//画柱图. rETLinux联盟
public void DrawZhuImage() rETLinux联盟
{ rETLinux联盟
base.Text = ""; rETLinux联盟
//画Div rETLinux联盟
//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 );'>"); rETLinux联盟
sbText.Append("<div id='PicDiv' style='left:0;position:relative; top:0; width:" + xwidth + "; height:" + yheight + ";text-align:left;'>"); rETLinux联盟
//base.Style.Value = "left:" + xposition + ";position:relative; top:" + yposition + "; width:" + (xwidth+20) + "; height:" + (20+yheight) + ";'"; rETLinux联盟
//画X轴 rETLinux联盟
sbText.Append("<v:line id='Xzhou' from='0," + yheight + "' to='" + xwidth + "," + yheight + "'>" rETLinux联盟
+ "<v:stroke EndArrow='Classic'/></v:line><v:TextBox style='position:absolute; width:100px;top:" + (yheight + 10) + ";left:" + (xwidth) + "'>" + xSign + "</v:TextBox>"); rETLinux联盟
//画X轴方向的线条 rETLinux联盟
int HaveData = ComputeX(xwidth); rETLinux联盟
//if (HaveData == 0) rETLinux联盟
//{ rETLinux联盟
// sbText.Append("</div>"); rETLinux联盟
// base.Text = sbText.ToString(0, sbText.Length); rETLinux联盟
// return; rETLinux联盟
//} rETLinux联盟
//画Y轴 rETLinux联盟
sbText.Append("<v:line id='Yzhou' from='0," + yheight + "' to='0,0'><v:stroke EndArrow='Classic'/><v:TextBox style=' width:100px;padding-left:10px;'>" + ySign + "</v:TextBox></v:line>"); rETLinux联盟
//画Y轴方向的线条 rETLinux联盟
ComputeY(yheight); rETLinux联盟
rETLinux联盟
//画DIV结束标记 rETLinux联盟
sbText.Append("</div>"); rETLinux联盟
//画隐形文本框 rETLinux联盟
sbText.Append("<input type='hidden' value='" + strHeight.Substring(0, strHeight.Length - 1) + "' name='heightDataSource' id='heightDataSource'/>"); rETLinux联盟
sbText.Append("<input type='hidden' value='" + strTop.Substring(0, strTop.Length - 1) + "' name='topDataSource' id='topDataSource'/>"); rETLinux联盟
//给Lable控件的Text赋值 rETLinux联盟
base.Text = sbText.ToString(0, sbText.Length); rETLinux联盟
Page.RegisterStartupScript("zhuup", RegisterScript()); rETLinux联盟
} rETLinux联盟
// rETLinux联盟
private int ComputeX(int XWidth) rETLinux联盟
{ //柱子颜色数组 rETLinux联盟
string[,] ZColor = new string[6, 2]; rETLinux联盟
ZColor[0, 0] = "#666699"; ZColor[0, 1] = "#d9d9e5"; rETLinux联盟
ZColor[1, 0] = "#00ff00"; ZColor[1, 1] = "#d1ffd1"; rETLinux联盟
ZColor[2, 0] = "#ff0000"; ZColor[2, 1] = "#ffbbbb"; rETLinux联盟
ZColor[3, 0] = "#ff9900"; ZColor[3, 1] = "#ffe3bb"; rETLinux联盟
ZColor[4, 0] = "#33cccc"; ZColor[4, 1] = "#cff4f3"; rETLinux联盟
ZColor[5, 0] = "#993300"; ZColor[5, 1] = "#ffc7ab"; rETLinux联盟
rETLinux联盟
XWidth -= 10;//箭头下面的长度 rETLinux联盟
rETLinux联盟
int ColorIndex = 0; rETLinux联盟
double height = 0; rETLinux联盟
int Zhuposition = 0; rETLinux联盟
int Count = this.DataSource==null?XWidth:this.DataSource.Count; rETLinux联盟
int num=1; rETLinux联盟
//Count = 0; rETLinux联盟
//if (Count == 0) rETLinux联盟
//{ rETLinux联盟
// sbText.Append("<div style='font-size:14px;color:red;'>暂无数据</div>"); rETLinux联盟
// return 0; rETLinux联盟
//} rETLinux联盟
int UnitLength = XWidth / Count;//计算单位长度 rETLinux联盟
foreach (VmlDataSource var in this.datasource) rETLinux联盟
{ rETLinux联盟
//画X轴下标 rETLinux联盟
sbText.Append("<v:line from='" + num * UnitLength + "," + yheight + "' to='" + num * UnitLength + "," + (yheight + bgdistance) + "'>" rETLinux联盟
+ "</v:line><v:shape style='left:" + (num * UnitLength -50) + ";top:" + yheight + ";'><v:textbox>" + var.Key + "</v:textbox></v:shape>"); rETLinux联盟
rETLinux联盟
height = var.value; rETLinux联盟
Zhuposition = ((num - 1) * UnitLength + UnitLength / 2) - (zhuWidth / 2); rETLinux联盟
rETLinux联盟
if (ColorIndex >= ZColor.Length / 2) rETLinux联盟
{ rETLinux联盟
ColorIndex = 0; rETLinux联盟
} rETLinux联盟
//sbText.Append("<v:rect id='DataZhu"+num+"' style='z-index:1; position:absolute; top:" + (yheight - height) + ";" rETLinux联盟
sbText.Append("<v:rect id='DataZhu"+num+"' style='z-index:1; position:absolute; top:" + yheight + ";" rETLinux联盟
+ "left:" + Zhuposition + ";width:" + zhuWidth + ";height:0;' fillcolor='" + ZColor[ColorIndex, 0] + "'>" rETLinux联盟
+ "<v:fill color2='" + ZColor[ColorIndex, 1] + "' rotate='t' type='gradient'/>" rETLinux联盟
+ "<v:extrusion v:ext='view' backdepth='" + (2 * bgdistance) + "' color='" + ZColor[ColorIndex, 0] + "' brightness='0.2' on='t'/></v:rect>" rETLinux联盟
+ "<v:TextBox id='ShowData"+num+"' style='position:absolute;display:none;z-index:2;top:" + (yheight - 20) + "; left:" + Zhuposition + "'>" + height + "</v:TextBox>"); rETLinux联盟
strHeight += height + ","; rETLinux联盟
strTop += (yheight - height) + ","; rETLinux联盟
ColorIndex++; rETLinux联盟
num++; rETLinux联盟
} rETLinux联盟
return 1; rETLinux联盟
} rETLinux联盟
// rETLinux联盟
private void ComputeY(int YHeight) rETLinux联盟
{ rETLinux联盟
YHeight -= 10;//箭头下面的长度 rETLinux联盟
if (yItemWidth > 0) rETLinux联盟
{ rETLinux联盟
int Units = YHeight / yItemWidth;//计算单位长度 rETLinux联盟
for (int i = 0; i <= Units; i++) rETLinux联盟
{ rETLinux联盟
int areaLenght = yheight - (i * yItemWidth); rETLinux联盟
sbText.Append("<v:line from='0," + areaLenght + "' to='" + bgdistance + "," + (areaLenght - bgdistance) + "' color='" + lineColor + "'><v:stroke color='" + lineColor + "'/></v:line>" rETLinux联盟
+ "<v:line from='0," + areaLenght + "' to='-10," + areaLenght + "'>" rETLinux联盟
+ "</v:line><v:shape style='top:" + (areaLenght-10) + ";left:-50;'><v:TextBox>" + i * yItemWidth + "</v:TextBox></v:shape>" rETLinux联盟
+ "<v:line from='" + bgdistance + "," + (areaLenght - bgdistance) + "' to='" + xwidth + "," + (areaLenght - bgdistance) + "'><v:stroke color='" + lineColor + "'/></v:line>"); rETLinux联盟
} rETLinux联盟
//画Y轴平行的线 rETLinux联盟
sbText.Append("<v:line id='YzhouPX' from='" + bgdistance + "," + (yheight - bgdistance) + "' to='" + bgdistance + "," + ((yheight - (Units * yItemWidth)) - bgdistance) + "'><v:stroke color='" + lineColor + "'/></v:line>"); rETLinux联盟
} rETLinux联盟
} rETLinux联盟
#endregion rETLinux联盟
#region 画饼图 rETLinux联盟
private void DrawBingImage() rETLinux联盟
{ rETLinux联盟
base.Text = ""; rETLinux联盟
//定义颜色 rETLinux联盟
string[] Colors = new string[6]; rETLinux联盟
Colors[0] = "#666699"; rETLinux联盟
Colors[1] = "#00ff00"; rETLinux联盟
Colors[2] = "#ff0000"; rETLinux联盟
Colors[3] = "#ff9900"; rETLinux联盟
Colors[4] = "#33cccc"; rETLinux联盟
Colors[5] = "#993300"; rETLinux联盟
//开始标记 rETLinux联盟
//sbText.Append("<div id='pic' style='position:absolute;'>"); rETLinux联盟
// rETLinux联盟
double TotalCount = 0; rETLinux联盟
foreach (VmlDataSource vd in datasource) rETLinux联盟
{ rETLinux联盟
TotalCount += vd.value; rETLinux联盟
} rETLinux联盟
//计算单位数字的角度 rETLinux联盟
double UnitAngle = 360 / TotalCount; rETLinux联盟
//存储画下弧度的起点 rETLinux联盟
double TempUnitArc=0.00; rETLinux联盟
//存储前面已有的角度 rETLinux联盟
double TempUnitAngle=0.00; rETLinux联盟
int i = 0; rETLinux联盟
string ColorInfo = ""; rETLinux联盟
sbText.Append("<div id='PicDiv' style='left:0;position:relative; top:0; width:" + xwidth + "; height:" + yheight + ";text-align:left; font-size:12px; border:solid 1px red;'>"); rETLinux联盟
sbText.Append("<div style='left:" + (radii+xposition) + ";position:relative; top:" + (radii+yposition) + ";'>"); rETLinux联盟
sbText.Append("<v:TextBox id='msgShow' inset='5pt,5pt,5pt,5pt' style='width:" + Colors[i] + ";position:absolute;z-index:2;display:none;background-color:red; font-size:12px;'></v:TextBox>"); rETLinux联盟
foreach (VmlDataSource vd in datasource) rETLinux联盟
{ rETLinux联盟
rETLinux联盟
//计算弧度 rETLinux联盟
double UnitArc = (vd.value * UnitAngle + TempUnitAngle) * Math.PI / 180; rETLinux联盟
//计算开始和结束位置 rETLinux联盟
double sx = Math.Round(Math.Cos(TempUnitArc) * radii);//Math.Sign( rETLinux联盟
double sy = Math.Round(Math.Sin(TempUnitArc) * radii); rETLinux联盟
double ex = Math.Round(Math.Cos(UnitArc) * radii); rETLinux联盟
//double aa = Math.Sin(UnitArc) * radii; rETLinux联盟
//double bb = Math.Round(Math.Sin(UnitArc) * radii,4); rETLinux联盟
double ey = Math.Round(Math.Sin(UnitArc) * radii); rETLinux联盟
//所占百份比 rETLinux联盟
double rate = Math.Round(vd.value * 100 / TotalCount, 2); rETLinux联盟
//开始画图 rETLinux联盟
sbText.Append("<v:shape ID='ccc' style='position:absolute;width:200px; height:200px;'coordsize='200,200' fillcolor='#" + Colors[i] + "' filled='t' strokecolor='#FFFFFF'"); rETLinux联盟
sbText.Append(" path='m0,0 l" + sx + "," + sy + " ar-" + radii + ",-" + radii + "," + radii + "," + radii + "," + ex + "," + ey + "," + sx + "," + sy + " l0,0 x e'"); rETLinux联盟
sbText.Append("title='名称：" + vd.key + "\r数量：" + vd.value + "\r所占比例：" + rate + "%'></v:shape>"); rETLinux联盟
//给临时变量赋值 rETLinux联盟
TempUnitAngle += vd.value * UnitAngle; rETLinux联盟
TempUnitArc = UnitArc; rETLinux联盟
//显示颜色说明框 rETLinux联盟
ColorInfo += "<div style='position:relative;padding-top:3px;padding-bottom:3px;' title='所占比例：" + rate + "%' onMouseOver='this.style.border=\"solid 1px #D38F61\"' onMouseOut='this.style.border=\"none\"'>" rETLinux联盟
+ " <v:rect style='position:relative;width:20px;height:20px;' fillcolor='" + Colors[i] + "'/>" + vd.key + "：" + vd.value + " (" + rate + "%)</div>" rETLinux联盟
; rETLinux联盟
//如果颜色遍历完了，还有数据要显示那就重新再一次遍历。占：" + (Math.Round(vd.value * 100 / TotalCount, 2)) + "% rETLinux联盟
i = (i >= Colors.Length ? 0 : ++i); rETLinux联盟
} rETLinux联盟
sbText.Append("</div>"); rETLinux联盟
sbText.Append("<div style='border:solid 1px #000;padding:10px;margin-right:10px;position:relative;left:" + (2 * radii + 20 + xposition) + "px;top:10px;width:" + (xwidth - (2 * radii + 40 + xposition)) + ";'>"); rETLinux联盟
//sbText.Append("<div style='padding-left:10px;width:" + (xwidth - (2 * radii +30+ xposition)) +";height:auto;'>"); rETLinux联盟
//总数 rETLinux联盟
sbText.Append("<div style='background-color:#000;color:#fff;'>总数据:"+TotalCount+"</div>"); rETLinux联盟
sbText.Append(ColorInfo); rETLinux联盟
sbText.Append("</div></div>"); rETLinux联盟
this.Text = sbText.ToString(); rETLinux联盟
} rETLinux联盟
#endregion rETLinux联盟
/// <summary> rETLinux联盟
/// 控件加载时画图 rETLinux联盟
/// </summary> rETLinux联盟
/// <param name="e"></param> rETLinux联盟
protected override void OnLoad(EventArgs e) rETLinux联盟
{ rETLinux联盟
base.OnLoad(e); // Page.RegisterStartupScript("HelloWord", "<script>alert('BBB');</script>"); rETLinux联盟
DrawVml(); rETLinux联盟
//Page.RegisterStartupScript("", "<script>alert('aaa');</script>"); rETLinux联盟
} rETLinux联盟
protected override void OnPreRender(EventArgs e) rETLinux联盟
{ rETLinux联盟
base.OnPreRender(e); rETLinux联盟
Page.RegisterStartupScript("", "<script>AllPlay();</script>"); rETLinux联盟
} rETLinux联盟
} rETLinux联盟
*注意里面的数据源类型和枚举在下面定义. rETLinux联盟
/// <summary> rETLinux联盟
/// 画图时用的数据源 rETLinux联盟
/// </summary> rETLinux联盟
public class VmlDataSource rETLinux联盟
{ rETLinux联盟
public VmlDataSource() rETLinux联盟
{ rETLinux联盟
rETLinux联盟
} rETLinux联盟
rETLinux联盟
public string key; rETLinux联盟
public double value; rETLinux联盟
/// <summary> rETLinux联盟
/// 键值 rETLinux联盟
/// </summary> rETLinux联盟
public string Key rETLinux联盟
{ rETLinux联盟
get { return key; } rETLinux联盟
set { key = value; } rETLinux联盟
} rETLinux联盟
public double Value rETLinux联盟
{ rETLinux联盟
get rETLinux联盟
{ rETLinux联盟
if (this.value.GetType() != Type.GetType("System.Int32")) rETLinux联盟
return 0; rETLinux联盟
else rETLinux联盟
return this.value; rETLinux联盟
} rETLinux联盟
set rETLinux联盟
{ rETLinux联盟
this.value = value; rETLinux联盟
} rETLinux联盟
} rETLinux联盟
rETLinux联盟
} rETLinux联盟
/// <summary> rETLinux联盟
/// 枚举画图的类型 rETLinux联盟
/// </summary> rETLinux联盟
public enum IszhuOrBing rETLinux联盟
{ rETLinux联盟
// rETLinux联盟
Zhu=0, rETLinux联盟
// rETLinux联盟
Bing=1 rETLinux联盟
} rETLinux联盟
} rETLinux联盟
整个过程就是这样了,不过这只是个粗略的过程里面还很多的BUG没有解觉掉.画数据统计的图表完成了. rETLinux联盟
效果图如下. rETLinux联盟
 rETLinux联盟
 rETLinux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
