`
happmaoo
  • 浏览: 4332979 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)

阅读更多
<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