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

(一). 概述

                本文主要演示一个比较简单的 WebChart 柱状实现,  可以一方面了解一个较完整的控件开发实例, 

        里面用到了复合样式及视图存储等内容.  另一方面了解一下WebChart的实现原理.  在Web开发中, 最终

        是用浏览器呈现各种图表,  图表控件呈现过程是 根据控件提供的属性接口接收到数据参数, 用最基本的

        Html元素<Table><tr><td>来呈现图表.  

        注:  本文参考 [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 代码

  1 namespace KingControls
  2 {
  3     /// <summary>
  4     /// Author: [ ChengKing(ZhengJian) ] 
  5     /// Blog:   Http://blog.csdn.net/ChengKing
  6     /// 本代码 参照 Asp.net 2.0高级编程 方案
  7     /// </summary>
  8     [DefaultProperty("Value")]
  9     [ToolboxData("<{0}:SimpleGaugeBar runat=server></{0}:SimpleGaugeBar>")]
 10     [PersistChildrenAttribute(false)]
 11     public class SimpleGaugeBar : CompositeControl
 12     {
 13         //在绘制输出画面时，标志是哪个TD为分界点(从这个分界点改变表格的颜色绘制)
 14         private int _intDividerCell;
 15 
 16         private TextItemStyle _textStyle;
 17 
 18         public SimpleGaugeBar()            
 19         {
 20         }
 21 
 22         #region 属性
 23         /// <summary>
 24         /// 进度条值
 25         /// </summary>
 26         public float Value
 27         {
 28             get
 29             {
 30                 object o = ViewState["Value"];
 31                 if (o == null)
 32                     return 0;
 33                 return float.Parse(o.ToString());
 34             }
 35             set
 36             {
 37                 this.ViewState["Value"] = value;
 38                 if (value > Maximum)
 39                 {
 40                     this.ViewState["Value"] = Maximum;
 41                 }
 42             }
 43         }
 44 
 45         /// <summary>
 46         /// 全值
 47         /// </summary>
 48         public float Maximum
 49         {
 50             get
 51             {
 52                 object o = this.ViewState["Maximum"];
 53                 if (o == null)
 54                 {
 55                     return 100;
 56                 }
 57                 return float.Parse(o.ToString());
 58             }
 59             set
 60             {
 61                 this.ViewState["Maximum"] = value;
 62             }
 63         }
 64 
 65         /// <summary>
 66         /// 表示进度条分几段
 67         /// </summary>
 68         public int Segments
 69         {
 70             get
 71             {
 72                 object o = this.ViewState["Segments"];
 73                 if (o == null)
 74                 {
 75                     return 4;
 76                 }
 77                 return int.Parse(o.ToString());
 78             }
 79             set
 80             {
 81                 this.ViewState["Segments"] = value;
 82                 if (value < 1)
 83                 {
 84                     this.ViewState["Segments"] = 1;
 85                 }
 86             }
 87         }
 88 
 89         /// <summary>
 90         /// 文本呈现格式
 91         /// </summary>
 92         public string FormatString
 93         {
 94             get
 95             {
 96                 object o = this.ViewState["FormatString"];
 97                 if (o == null)
 98                 {
 99                     return "<b>{0}</b>/<b>{1}</b>";
100                 }
101                 return (string)o;
102             }
103             set
104             {
105                 this.ViewState["FormatString"] = value;
106             }
107         }
108 
109         public bool GridLines
110         {
111             get
112             {
113                 object o = this.ViewState["GridLines"];
114                 if (o == null)
115                 {
116                     return true;
117                 }
118                 return (bool)o;
119             }
120             set
121             {
122                 this.ViewState["GridLines"] = value;
123             }
124         }
125 
126         [PersistenceMode(PersistenceMode.EncodedInnerDefaultProperty)]
127         [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
128         [NotifyParentProperty(true)]        
129         public TextItemStyle TextStyle
130         {
131             get
132             {
133                 if (_textStyle == null)
134                 {
135                     _textStyle = new TextItemStyle();
136                 }
137                 if (IsTrackingViewState)
138                 {
139                     ((IStateManager)_textStyle).TrackViewState();
140                 }
141                 return _textStyle;
142             }
143         }
144 
145         #endregion
146 
147         #region 方法
148 
149         protected override void Render(HtmlTextWriter writer)
150         {
151             PrepareControlForRendering();            
152             base.Render(writer);
153 
154             //base.RenderContents(writer);
155             //this.RenderContents(writer);
156             //this.Render(writer);
157             
158         }
159 
160         protected override void CreateChildControls()
161         {
162             //base.CreateChildControls();
163             this.Controls.Clear();
164             CreateControlHierarchy();
165             ClearChildViewState();
166         }
167 
168         /// <summary>
169         /// 在Web开发中，用Table/TR/TD来表示图形输出
170         /// </summary>
171         protected virtual void CreateControlHierarchy()
172         {
173             //最外层表格
174             Table outer = new Table();
175             TableRow outerRow = new TableRow();
176             outer.Rows.Add(outerRow);
177 
178             TableCell rulerCell = new TableCell();
179             outerRow.Cells.Add(rulerCell);
180             BuildGaugeBar(rulerCell);
181 
182             //根据条件增加文本显示单元格
183             TableCell textCell = new TableCell();
184             if (!TextStyle.DisplayTextAtBottom)
185             {
186                 outerRow.Cells.Add(textCell);
187                 BuildLabel(textCell);
188             }
189 
190             this.Controls.Add(outer);
191 
192             if (!TextStyle.RenderInsideTable && TextStyle.DisplayTextAtBottom)
193             {
194                 BuildLabel(null);
195             }
196         }
197 
198         /// <summary>
199         /// 用Label来呈现文本,如: { 8/10 }
200         /// </summary>
201         /// <param name="tc"></param>
202         void BuildLabel(TableCell tc)
203         {
204             float buf = GetValueToRepresent();
205             string msg = GetTextToRepresent();
206 
207             Label lbl = new Label();
208             if (tc is TableCell)
209             {
210                 tc.Controls.Add(lbl);
211             }
212             else
213             {
214                 this.Controls.Add(lbl);
215             }
216             lbl.Text = String.Format(msg, buf, Maximum);
217         }
218 
219         void BuildGaugeBar(TableCell tc)
220         {
221             Table t = new Table();
222             TableRow tr = new TableRow();
223             t.Rows.Add(tr);
224 
225             BuildRuler(tr);
226 
227             if (TextStyle.RenderInsideTable)
228             {
229                 BuildLabelIntoTable(t);
230             }
231             tc.Controls.Add(t);
232         }
233 
234         void BuildRuler(TableRow ruler)
235         {
236             float val = GetValueToRepresent();
237             float valueToRepresent = 100f * val / Maximum;
238             int numOfSegments = GetNumOfSegments();
239             int segmentWidth = 100 / numOfSegments;
240             bool finished = false;
241             for (int i = 1; i <= numOfSegments; i++)
242             {
243                 if (valueToRepresent < i * segmentWidth)
244                 {
245                     if (finished)
246                     {
247                         TableCell stillToDo = new TableCell();
248                         ruler.Cells.Add(stillToDo);
249                         stillToDo.Width = Unit.Percentage(segmentWidth);
250                     }
251                     else
252                     {
253                         _intDividerCell = i - 1;
254                         TableCell cell = new TableCell();
255                         ruler.Cells.Add(cell);
256                         cell.Width = Unit.Percentage(segmentWidth);
257                         cell.Height = Unit.Percentage(100);
258 
259                         //增加子表
260                         Table child = new Table();
261                         child.Width = Unit.Percentage(100);
262                         child.Height = Unit.Percentage(100);
263                         cell.Controls.Add(child);
264                         child.CellPadding = 0;
265                         child.CellSpacing = 0;
266                         TableRow childRow = new TableRow();
267                         child.Rows.Add(childRow);
268 
269                         float fx = (100 * (valueToRepresent - segmentWidth * (i - 1)) / segmentWidth);
270                         if (valueToRepresent > (i - 1) * segmentWidth)
271                         {
272                             TableCell left = new TableCell();
273                             childRow.Cells.Add(left);
274                             left.Width = Unit.Percentage(fx);
275                         }
276                         TableCell right = new TableCell();
277                         childRow.Cells.Add(right);
278                         right.Width = Unit.Percentage(100 - fx);
279                         finished = true;
280                     }
281                 }
282                 else
283                 {
284                     TableCell done = new TableCell();
285                     ruler.Cells.Add(done);
286                     done.Width = Unit.Percentage(segmentWidth);
287                 }
288             }
289         }
290 
291         /// <summary>
292         /// 创建最外Table的第二行, 显示文本
293         /// </summary>
294         /// <param name="t"></param>
295         void BuildLabelIntoTable(Table t)
296         {
297             float buf = GetValueToRepresent();
298             int numOfSegments = GetNumOfSegments();
299             string msg = GetTextToRepresent();
300             if (TextStyle.DisplayTextAtBottom)
301             {
302                 TableRow label = new TableRow();
303                 t.Rows.Add(label);
304                 TableCell lblCell = new TableCell();
305                 label.Cells.Add(lblCell);
306 
307                 lblCell.ColumnSpan = numOfSegments;
308                 lblCell.Text = String.Format(msg, buf, Maximum);
309             }
310         }
311 
312         private string GetTextToRepresent()
313         {
314             return this.FormatString;
315         }
316 
317         private int GetNumOfSegments()
318         {
319             return this.Segments;
320         }
321 
322         private float GetValueToRepresent()
323         {
324             return this.Value;
325         }
326 
327         /// <summary>
328         /// 增加样式
329         /// </summary>
330         private void PrepareControlForRendering()
331         {
332             if (this.Controls.Count < 1)
333             {
334                 return;
335             }
336             Table outer = (Table)Controls[0];            
337             outer.CellPadding = 0;
338             outer.CellSpacing = 0;
339             outer.Width = Unit.Percentage(100);
340             outer.Height = Unit.Percentage(100); //this.Height;
341             outer.BorderWidth = Unit.Empty;
342 
343             Table t = (Table)outer.Rows[0].Cells[0].Controls[0];           
344 
345             t.CopyBaseAttributes(this);
346 
347             t.CellPadding = 0;
348             t.CellSpacing = 0;
349             t.Width = Unit.Percentage(100);
350             t.Height = Unit.Pixel(17);
351             t.BorderWidth = Unit.Empty;
352 
353             for (int i = 0; i < Segments; i++ )
354             {
355                 TableCell cell = t.Rows[0].Cells[i];
356                 if (GridLines)
357                 {
358                     cell.BackColor = this.BorderColor;
359                     cell.BorderStyle = this.BorderStyle;
360                     cell.BorderWidth = this.BorderWidth;                   
361                 }
362 
363                 //为刻度前面的表格设置颜色
364                 if (i < _intDividerCell)
365                 {
366                     cell.BackColor = this.ForeColor;
367                 }
368 
369                 //为刻度后面的表格设置颜色
370                 if (i >= _intDividerCell)
371                 {
372                     cell.BackColor = this.BackColor;
373                 }
374 
375                 //刻度单元格分两部分设置颜色
376                 if (i == _intDividerCell)
377                 {
378                     Table inner = (Table)cell.Controls[0];
379                     if (inner.Rows[0].Cells.Count > 1)
380                     {
381                         TableRow tr = inner.Rows[0];
382                         tr.Cells[0].BackColor = this.ForeColor;
383                         tr.Cells[1].BackColor = this.BackColor;
384                     }
385                     else
386                     {
387                         inner.Rows[0].Cells[0].BackColor = this.BackColor;
388                     }
389                 }
390             }
391 
392             if (!TextStyle.DisplayTextAtBottom)
393             {
394                 outer.Rows[0].Cells[1].ApplyStyle(TextStyle);
395                 outer.Rows[0].Cells[1].Width = Unit.Percentage(15);
396             }
397             else if (TextStyle.RenderInsideTable && TextStyle.DisplayTextAtBottom)
398             {
399                 TableRow row = t.Rows[1];
400                 row.ApplyStyle(TextStyle);
401             }
402             else
403             {
404                 Label lbl = (Label)this.Controls[1];
405                 lbl.ApplyStyle(TextStyle);
406             }
407         }
408 
409         #endregion
410     }
411 }
412 

 

   2. 复合样式文件 TextItemStyle.cs 代码

  1 namespace KingControls
  2 {
  3     /// <summary>
  4     /// Author: [ ChengKing(ZhengJian) ] 
  5     /// Blog:   Http://blog.csdn.net/ChengKing
  6     /// 本代码 参照 Asp.net 2.0高级编程 方案
  7     /// </summary>
  8     /// <summary>
  9     /// 定义 SimpleGaugeBar 控件的内部复合属性类
 10     /// </summary>    
 11     public class TextItemStyle : TableItemStyle, IStateManager
 12     {
 13         #region 类变量
 14 
 15         private bool _renderInsideTable;
 16         private bool _displayTextAtBottom;
 17 
 18         #endregion
 19 
 20         #region 构造函数
 21 
 22         public TextItemStyle()
 23         {
 24             _displayTextAtBottom = true;
 25             _renderInsideTable = false;
 26         }
 27 
 28         #endregion
 29 
 30         #region 属性
 31 
 32         [NotifyParentProperty(true)]
 33         public bool RenderInsideTable
 34         {
 35             get
 36             {
 37                 return _renderInsideTable;
 38             }
 39             set
 40             {
 41                 _renderInsideTable = value;
 42             }
 43         }
 44 
 45         [NotifyParentProperty(true)] 
 46         public bool DisplayTextAtBottom
 47         {
 48             get
 49             {
 50                 return _displayTextAtBottom;
 51             }
 52             set
 53             {
 54                 _displayTextAtBottom = value;
 55             }
 56         }
 57 
 58         bool IStateManager.IsTrackingViewState
 59         {
 60             get
 61             {
 62                 return base.IsTrackingViewState;
 63             }
 64         }
 65 
 66         #endregion
 67 
 68         #region 方法
 69         //从当前点开始, 此控件具有保存视图状态功能
 70         void IStateManager.TrackViewState()
 71         {
 72             base.TrackViewState();
 73         }
 74 
 75         object IStateManager.SaveViewState()
 76         {
 77             object[] state = new object[2];
 78             state[0] = base.SaveViewState();
 79             object[] others = new object[2];
 80             others[0] = _renderInsideTable;
 81             others[1] = _displayTextAtBottom;
 82             state[1] = (object)others;
 83 
 84             //状态管理会存储此返回的值; 另外此方法返回值还有个用途: 创建复合控件时取得各个子控件的视图状态时使用
 85             return state;
 86         }
 87 
 88         void IStateManager.LoadViewState(object state)
 89         {
 90             if (state == null)
 91             {
 92                 return;
 93             }
 94             object[] myState = (object[])state;
 95             base.LoadViewState(myState[0]);
 96 
 97             object[] others = (object[])myState[1];
 98             _renderInsideTable = (bool)others[0];
 99             _displayTextAtBottom = (bool)others[1];
100         }
101 
102         #endregion
103     }
104 
105 }

 

(四). 扩展功能

         通过看上面代码可以看到, 您可能会想到那些第三方公司开发的 WebChart 控件可以显示各种各样的复杂

图形, 而且不仅仅是柱状图, 还有饼状, 折线图, 甚至是 三维图形.

        以上代码仅演示了一个横向的单柱形图的做法. 但已经足够说明实现一个 Chart 的过程. 如果感兴趣, 您可

以试着扩展它, 比如: 先实现把示例代码的 横向柱状图变为 竖向的柱状图;  再自己试着做一个 组合控件, 将多

个本控件整合成一个可以同时显示多列的统计分析图;  更广一点, 再考虑做一个 饼图, 折线图等.

        

(五). 示例代码下载

        https://files.cnblogs.com/MVP33650/SimpleGaugeBarControl.rar

 

(六). 控件开发其它相关文章:

        http://blog.csdn.net/ChengKing/category/288694.aspx

 

 

 

 

 

 

 

 

 

 

 

 

 

   

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1786409