(一). 概述
本文主要演示一个比较简单的 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 代码
1namespaceKingControls
2{
3///<summary>
4///Author:[ChengKing(ZhengJian)]
5///Blog:Http://blog.csdn.net/ChengKing
6///本代码参照Asp.net2.0高级编程方案
7///</summary>
8[DefaultProperty("Value")]
9[ToolboxData("<{0}:SimpleGaugeBarrunat=server></{0}:SimpleGaugeBar>")]
10[PersistChildrenAttribute(false)]
11publicclassSimpleGaugeBar:CompositeControl
12{
13//在绘制输出画面时，标志是哪个TD为分界点(从这个分界点改变表格的颜色绘制)
14privateint_intDividerCell;
15
16privateTextItemStyle_textStyle;
17
18publicSimpleGaugeBar()
19{
20}
21
22#region属性
23///<summary>
24///进度条值
25///</summary>
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>
46///全值
47///</summary>
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>
66///表示进度条分几段
67///</summary>
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(value<1)
83{
84this.ViewState["Segments"]=1;
85}
86}
87}
88
89///<summary>
90///文本呈现格式
91///</summary>
92publicstringFormatString
93{
94get
95{
96objecto=this.ViewState["FormatString"];
97if(o==null)
98{
99return"<b>{0}</b>/<b>{1}</b>";
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>
169///在Web开发中，用Table/TR/TD来表示图形输出
170///</summary>
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>
199///用Label来呈现文本,如:{8/10}
200///</summary>
201///<paramname="tc"></param>
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;i<=numOfSegments;i++)
242{
243if(valueToRepresent<i*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>
292///创建最外Table的第二行,显示文本
293///</summary>
294///<paramname="t"></param>
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><spa
分享到：
相关推荐
本示例将详细介绍如何开发一个自定义图表控件——WebChart，特别是柱状图的实现。通过这个控件，开发者可以方便地在网页上绘制数据，展示各种统计信息，提升用户界面的交互性和视觉效果。 首先，我们要了解自定义...
这个控件是.NET Framework 3.5版本引入的，提供了多种图表类型，包括柱状图、饼图、线形图、散点图等，并支持3D视图，让数据可视化更具立体感。 首先，我们需要在ASP.NET页面中添加Chart控件。这可以通过Visual ...
"WebChart"可能是一个示例项目或者一个自定义的图表控件，它展示了如何在ASP.NET环境中使用图表功能。这个项目可能包含了HTML、CSS、JavaScript以及C#或VB.NET的后端代码。开发者可以通过查看这个项目的源码来学习...
在ASP.NET MVC中，我们可以使用Chart控件来创建各种类型的图表，包括折线图、柱状图、饼图等，以便于数据可视化。这个示例将深入探讨如何在MVC应用中集成和使用Chart控件。 首先，我们需要在项目中添加对`System....
ASP.NET Flash图表控件是一种用于在Web应用中创建动态、交互式图表的工具，它结合了ASP.NET的强大功能和Flash的视觉吸引力。OpenFlashChart是一个流行的开源库，用于生成高质量的图表，它提供了丰富的定制选项，使...
这通常涉及到创建一个`Microsoft.Office.WebComponent.Chart`对象，设置其属性如`SeriesCollection`、`ChartType`、`Title`等，并将其附加到OWC控件上： ```csharp protected void Page_Load(object sender, ...
以下是一个简单的示例，展示如何创建一个柱状图： ```csharp protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { // 创建数据源 DataTable dataTable = new DataTable(); dataTable....
在ASP和ASP.NET框架中，Microsoft提供了内置的Chart控件，使得开发者可以方便地创建各种复杂的图表，如线性图、饼状图和柱状图等。本文将深入探讨这个强大的图表工具，包括其功能、使用方法以及示例。 ### 1. Chart...
【WebChart曲线-柱状图ASP.NET源码集】是一个包含18个不同类型的网页动态曲线图和柱状图的源代码集合，专为ASP.NET平台设计。这些源程序为开发者提供了一种强大的工具，用于在Web应用中展示数据可视化效果，特别是...
"ZedGraph_Demo"这个压缩包很可能包含了一个基于ZedGraph库的示例项目，ZedGraph是一个开源的.NET图表组件，它提供了多种类型的图表，如折线图、柱状图、饼图、散点图等，适用于各种数据分析和报告场景。 ZedGraph...
这些图表可以是线形图、柱状图、饼图、散点图等多种类型。使用此控件，开发者可以将复杂的数据集可视化，从而帮助用户更好地理解数据背后的信息。 在标题“***微软图表控件使用示例代码分享”中，提到了如何在***...
在ASP.NET代码中，可以使用<OWC:Chart>标签来定义这个控件，设置其ID、宽度、高度以及图表类型（这里是柱状图）。例如： ```asp.net <OWC:Chart ID="Chart1" runat="server" Width="500px" Height="300px" ...
在这个场景中，"asp.net可配置的柱状图显示"指的是使用ASP.NET技术创建一个可自定义的柱状图表，通常用于数据可视化，展示各类统计信息。柱状图是一种常见的数据表示方式，通过长条的高度来反映数据的大小，便于用户...
总的来说，"18个WebChart曲线/柱状图C#源码"是一个宝贵的资源，它提供了多种图表类型，可以帮助开发人员轻松地在Web应用中实现数据可视化。通过深入研究和实践，你可以提升自己的Web开发技能，创建出更具吸引力和...
本文将深入探讨如何使用C#语言在ASP.NET环境中创建柱状图，并提供一个简化的代码示例来帮助您理解这一过程。 首先，我们需要引入一个柱状图控件库。ASP.NET自身虽然没有内置的图表控件，但我们可以借助第三方库如...
`ChartWebSamples`这个文件夹很可能包含了实际的ASP.NET Web应用程序示例，其中包含ASPX、CS（代码后置）和可能的数据源文件，例如CSV或SQL数据库文件。开发者可以通过这些示例学习如何将数据绑定到图表，以及如何...
在.NET Web开发中，Chart控件是一个非常强大的工具，它允许开发者创建各种复杂的图表和图形，如折线图、柱状图、饼图、散点图等，以便于数据可视化和分析。本实例将深入探讨如何使用Chart控件进行Web应用开发。 ...
WebChart控件是.NET Framework的一部分，主要用于ASP.NET Web Forms应用中。它基于Microsoft Chart Controls，支持多种图表样式，包括2D和3D视图，以及自定义颜色、样式和数据绑定等功能。WebChart控件通过服务器端...
标题中的“用Flash实现带柱状图及线条图控件源代码(支持ASP.NET,PHP等)”揭示了这个资源是一个使用Flash技术制作的图表组件，它不仅能够展示柱状图和线条图，还兼容多种服务器端编程语言，如ASP.NET和PHP。...