<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/46860.html" frameborder="0" width="468" scrolling="no" height="60"></iframe>
(一). 概述
本文主要演示一个比较简单的 WebChart 柱状实现, 可以一方面了解一个较完整的控件开发实例,
里面用到了复合样式及视图存储等内容.另一方面了解一下WebChart的实现原理. 在Web开发中, 最终
是用浏览器呈现各种图表, 图表控件呈现过程是 根据控件提供的属性接口接收到数据参数, 用最基本的
Html元素
来呈现图表. 注: 本文参考 [Asp.net 2.0高级编程] 方案, 由于本书中配套代码说明链接打不开, 所以在文章最后面可以
下载我上传的自己做得比较完整的示例代码.
(二). 运行效果
1. 在浏览器中运行的柱状图
2. 主要属性 ( 可以通过修改这些属性参数修改其 外观样式和文本显示格式等信息)
主要属性用法介绍:
SimpleGaugeBar 控件重要属性介绍
|
FormatString | 设置显示的文本格式, 如: “68 of 100” |
Maximum | 全值大小, 如上图中设置了 100. |
Segments | 每段值, 如上图中设置了 10. 这样根据Maximum的值控件就能够算出共有 100/10=10段(全值共有10个td呈现) |
TextStyle | 显示文本样式复合属性 |
Value | 设置有效值, 如上图中设置了 68. |
ForeColor | 柱装有效值长度标志颜色(根据Value值决定其长度) |
BackColor | 柱装全值标志颜色 |
BorderColor | 柱状边框颜色 |
(三). 代码
代码比较简单, 就两个文件; 主要代码, 都包含了中文注释. 在这里对代码不作多介绍.
1. 主控件文件 SimpleGaugeBar.cs 代码
1namespaceKingControls 2{ 3///<summary></summary> 4///Author:[ChengKing(ZhengJian)] 5///Blog:Http://blog.csdn.net/ChengKing 6///本代码参照Asp.net2.0高级编程方案 7/// 8[DefaultProperty("Value")] 9[ToolboxData("{0}:SimpleGaugeBar>")] 10[PersistChildrenAttribute(false)] 11publicclassSimpleGaugeBar:CompositeControl 12{ 13//在绘制输出画面时,标志是哪个TD为分界点(从这个分界点改变表格的颜色绘制) 14privateint_intDividerCell; 15 16privateTextItemStyle_textStyle; 17 18publicSimpleGaugeBar() 19{ 20} 21 22#region属性 23///<summary></summary> 24///进度条值 25/// 26publicfloatValue 27{ 28get 29{ 30objecto=ViewState["Value"]; 31if(o==null) 32return0; 33returnfloat.Parse(o.ToString()); 34} 35set 36{ 37this.ViewState["Value"]=value; 38if(value>Maximum) 39{ 40this.ViewState["Value"]=Maximum; 41} 42} 43} 44 45///<summary></summary> 46///全值 47/// 48publicfloatMaximum 49{ 50get 51{ 52objecto=this.ViewState["Maximum"]; 53if(o==null) 54{ 55return100; 56} 57returnfloat.Parse(o.ToString()); 58} 59set 60{ 61this.ViewState["Maximum"]=value; 62} 63} 64 65///<summary></summary> 66///表示进度条分几段 67/// 68publicintSegments 69{ 70get 71{ 72objecto=this.ViewState["Segments"]; 73if(o==null) 74{ 75return4; 76} 77returnint.Parse(o.ToString()); 78} 79set 80{ 81this.ViewState["Segments"]=value; 82if(value1) 83{ 84this.ViewState["Segments"]=1; 85} 86} 87} 88 89///<summary></summary> 90///文本呈现格式 91/// 92publicstringFormatString 93{ 94get 95{ 96objecto=this.ViewState["FormatString"]; 97if(o==null) 98{ 99return"{0}/{1}"; 100} 101return(string)o; 102} 103set 104{ 105this.ViewState["FormatString"]=value; 106} 107} 108 109publicboolGridLines 110{ 111get 112{ 113objecto=this.ViewState["GridLines"]; 114if(o==null) 115{ 116returntrue; 117} 118return(bool)o; 119} 120set 121{ 122this.ViewState["GridLines"]=value; 123} 124} 125 126[PersistenceMode(PersistenceMode.EncodedInnerDefaultProperty)] 127[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] 128[NotifyParentProperty(true)] 129publicTextItemStyleTextStyle 130{ 131get 132{ 133if(_textStyle==null) 134{ 135_textStyle=newTextItemStyle(); 136} 137if(IsTrackingViewState) 138{ 139((IStateManager)_textStyle).TrackViewState(); 140} 141return_textStyle; 142} 143} 144 145#endregion 146 147#region方法 148 149protectedoverridevoidRender(HtmlTextWriterwriter) 150{ 151PrepareControlForRendering(); 152base.Render(writer); 153 154//base.RenderContents(writer); 155//this.RenderContents(writer); 156//this.Render(writer); 157 158} 159 160protectedoverridevoidCreateChildControls() 161{ 162//base.CreateChildControls(); 163this.Controls.Clear(); 164CreateControlHierarchy(); 165ClearChildViewState(); 166} 167 168///<summary></summary> 169///在Web开发中,用Table/TR/TD来表示图形输出 170/// 171protectedvirtualvoidCreateControlHierarchy() 172{ 173//最外层表格 174Tableouter=newTable(); 175TableRowouterRow=newTableRow(); 176outer.Rows.Add(outerRow); 177 178TableCellrulerCell=newTableCell(); 179outerRow.Cells.Add(rulerCell); 180BuildGaugeBar(rulerCell); 181 182//根据条件增加文本显示单元格 183TableCelltextCell=newTableCell(); 184if(!TextStyle.DisplayTextAtBottom) 185{ 186outerRow.Cells.Add(textCell); 187BuildLabel(textCell); 188} 189 190this.Controls.Add(outer); 191 192if(!TextStyle.RenderInsideTable&&TextStyle.DisplayTextAtBottom) 193{ 194BuildLabel(null); 195} 196} 197 198///<summary></summary> 199///用Label来呈现文本,如:{8/10} 200/// 201/// 202voidBuildLabel(TableCelltc) 203{ 204floatbuf=GetValueToRepresent(); 205stringmsg=GetTextToRepresent(); 206 207Labellbl=newLabel(); 208if(tcisTableCell) 209{ 210tc.Controls.Add(lbl); 211} 212else 213{ 214this.Controls.Add(lbl); 215} 216lbl.Text=String.Format(msg,buf,Maximum); 217} 218 219voidBuildGaugeBar(TableCelltc) 220{ 221Tablet=newTable(); 222TableRowtr=newTableRow(); 223t.Rows.Add(tr); 224 225BuildRuler(tr); 226 227if(TextStyle.RenderInsideTable) 228{ 229BuildLabelIntoTable(t); 230} 231tc.Controls.Add(t); 232} 233 234voidBuildRuler(TableRowruler) 235{ 236floatval=GetValueToRepresent(); 237floatvalueToRepresent=100f*val/Maximum; 238intnumOfSegments=GetNumOfSegments(); 239intsegmentWidth=100/numOfSegments; 240boolfinished=false; 241for(inti=1;inumOfSegments;i++) 242{ 243if(valueToRepresenti*segmentWidth) 244{ 245if(finished) 246{ 247TableCellstillToDo=newTableCell(); 248ruler.Cells.Add(stillToDo); 249stillToDo.Width=Unit.Percentage(segmentWidth); 250} 251else 252{ 253_intDividerCell=i-1; 254TableCellcell=newTableCell(); 255ruler.Cells.Add(cell); 256cell.Width=Unit.Percentage(segmentWidth); 257cell.Height=Unit.Percentage(100); 258 259//增加子表 260Tablechild=newTable(); 261child.Width=Unit.Percentage(100); 262child.Height=Unit.Percentage(100); 263cell.Controls.Add(child); 264child.CellPadding=0; 265child.CellSpacing=0; 266TableRowchildRow=newTableRow(); 267child.Rows.Add(childRow); 268 269floatfx=(100*(valueToRepresent-segmentWidth*(i-1))/segmentWidth); 270if(valueToRepresent>(i-1)*segmentWidth) 271{ 272TableCellleft=newTableCell(); 273childRow.Cells.Add(left); 274left.Width=Unit.Percentage(fx); 275} 276TableCellright=newTableCell(); 277childRow.Cells.Add(right); 278right.Width=Unit.Percentage(100-fx); 279finished=true; 280} 281} 282else 283{ 284TableCelldone=newTableCell(); 285ruler.Cells.Add(done); 286done.Width=Unit.Percentage(segmentWidth); 287} 288} 289} 290 291///<summary></summary> 292///创建最外Table的第二行,显示文本 293/// 294/// 295voidBuildLabelIntoTable(Tablet) 296{ 297floatbuf=GetValueToRepresent(); 298intnumOfSegments=GetNumOfSegments(); 299stringmsg=GetTextToRepresent(); 300if(TextStyle.DisplayTextAtBottom) 301{ 302TableRowlabel=newTableRow(); 303t.Rows.Add(label); 304TableCelllblCell=newTableCell(); 305label.Cells.Add(lblCell); 306 307lblCell.ColumnSpan=numOfSegments; 308lblCell.Text=String.Format(msg,buf,Maximum); 309} 310} 311 312privatestringGetTextToRepresent() 313{ 314returnthis.FormatString; 315} 316 317privateintGetNumOfSegments() 318{ 319returnthis.Segments; 320} 321 322privatefloatGetValueToRepresent() 323{ 324returnthis.Value; 325} 326 327///<summary></summary> 328
分享到:
Global site tag (gtag.js) - Google Analytics
|
相关推荐
Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)收藏
Asp.net 2.0 自定义控件开发简单实现代码
ASP.NET2.0自定义控件和组件开发
Asp.net 2.0 自定义控件开发[浮动工具条控件].rar
ASP.NET 2.0动态网站开发基础教程(C#) 第01章 ASP.NET2.0基础 Framework Web Form(共32页).ppt ASP.NET 2.0动态网站开发基础教程(C#) 第02章 HTML和脚本语言 VBScript javaScript(共21页).ppt ASP.NET 2.0...
ASP.NET 2.0 服务器控件与组件开发 (英文版PDF) Professional ASP.NET 2.0 Server Control and Component Development
模仿淘宝的asp.net2.0 分页控件, 内符dll和说明.
ASP.NET 2.0动态网站开发基础教程(C#) 第01章 ASP.NET2.0基础 Framework Web Form(共32页).ppt ASP.NET 2.0动态网站开发基础教程(C#) 第02章 HTML和脚本语言 VBScript javaScript(共21页).ppt ASP.NET 2.0...
在开发WEB的时候,尽管IDE提供了很丰富的控件库,但是,很多不能满足我们的需求。ASP.NET2.0服务器控件与组件开发高级编程源代码详细介绍.NET2.0中关于控件的开发过程。
Asp.net 2.0 FileUpload 控件的用法
ASP.NET 2.0动态网站开发基础教程(C#) 第01章 ASP.NET2.0基础 Framework Web Form(共32页).ppt ASP.NET 2.0动态网站开发基础教程(C#) 第02章 HTML和脚本语言 VBScript javaScript(共21页).ppt ASP.NET 2.0...
ASP.NET 2.0动态网站开发基础教程(C#) 第01章 ASP.NET2.0基础 Framework Web Form(共32页).ppt ASP.NET 2.0动态网站开发基础教程(C#) 第02章 HTML和脚本语言 VBScript javaScript(共21页).ppt ASP.NET 2.0...
ASP.NET 2.0动态网站开发基础教程(C#) 第01章 ASP.NET2.0基础 Framework Web Form(共32页).ppt ASP.NET 2.0动态网站开发基础教程(C#) 第02章 HTML和脚本语言 VBScript javaScript(共21页).ppt ASP.NET 2.0...
asp.net 2.0动态网站开发教程
asp.net 2.0 网站开发全程解析 第2版
本书通过深入剖析12个使用ASP.NET 2.0开发的项目,全面阐述了ASP.NET 2.0应用程序的架构及ASP.NET 2.0新增的控件和功能。通过探索这些项目的设计和代码,读者可快速掌握使用ASP.NET 2.0开发应用程序的技巧,从空白...
ASP.NET 2.0动态网站开发基础教程(C#)第01章 ASP.NET2.0基础 Framework Web Form(共32页).ppt ASP.NET 2.0动态网站开发基础教程(C#)第02章 HTML和脚本语言 VBScript javaScript(共21页).ppt ASP.NET 2.0动态...
ASP.NET2.0服务器控件开发之实现事件
ASP.NET 2.0快速入门(3):ASP.NET 2.0的新控件