Grafische Anzeige eines prozentualen Ergebnisses

Categories: Code, Snippets Posted by AlexanderZeitler on 9/13/2003 5:53 PM | Comments (0)

In der ASP.NET-Mailingliste ist heute wieder ein interessantes Problem aufgetaucht: Die Darstellung von Prozentwerten in Form einer Grafik, sprich als Balkendiagramm.

Ein Beispiel für eine mögliche Lösung findet sich hier.

Die vorgestellte Lösung ist relativ einfach zu realisieren. Man benötigt eine HTML-Tabelle mit der Breite 100px mit 2 Tabellenzellen. Diese wiederum beinhalten je eine Grafik in je einer Farbe, welche den Balken bzw. den "Hintergrund" darstellen. Die Grafiken sind 1x1px groß und werden im Code entsprechend skaliert.

Der Code der aspx-Datei sieht wie folgt aus: 

 
1:   <%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="learncontrols.StatBar" %>
2:   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3:   <HTML>
4:       <HEAD>
5:           <title>StatBar</title>
6:           <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
7:           <meta content="C#" name="CODE_LANGUAGE">
8:           <meta content="JavaScript" name="vs_defaultClientScript">
9:           <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10:       </HEAD>
11:       <body MS_POSITIONING="GridLayout">
12:           <form id="Form1" method="post" runat="server">
13:               Bitte einen ganzzahligen Wert 0 &lt;= 100 eingeben und *auf* den Button 
14:               klicken.
15:               <asp:table     id="Table1"
16:                           tyle="BORDER:1px solid black; POSITION: absolute; TOP: 94px"
17:                           runat="server"
18:                           width="100"
19:                           cellPadding="0"
20:                           cellSpacing="0" 
21:                           height="20"     
22:                           border="0">
23:                   <asp:TableRow>
24:                       <asp:TableCell>
25:                           <asp:Image     ID="img1" 
26:                                       ImageUrl="images/black.png" 
27:                                       Runat="server" 
28:                                       Height="20" />
29:                       </asp:TableCell>
30:                       <asp:TableCell>
31:                           <asp:Image    ID="img2" 
32:                                       ImageUrl="images/white.png" 
33:                                       Runat="server"
34:                                       Height="20" />
35:                       </asp:TableCell>
36:                   </asp:TableRow>
37:               </asp:table>
38:               <asp:textbox     id="TextBox1"
39:                               style="Z-INDEX: 102; LEFT: 23px; POSITION: absolute; TOP: 46px" 
40:                               runat="server">
41:               </asp:textbox>
42:               <asp:button    id="Button1"
43:                               style="Z-INDEX: 103; LEFT: 191px; POSITION: absolute; TOP: 45px" 
44:                               runat="server"
45:                               Text="Button">
46:               </asp:button>
47:               <asp:RequiredFieldValidator id="RequiredFieldValidator1" 
48:                                           style="Z-INDEX: 104; LEFT: 33px; POSITION: absolute; TOP: 139px"
49:                                           runat="server"
50:                                           ErrorMessage="Bitte geben Sie eine Ganzzahl 0 <= 100 ein!" 
51:                                           ControlToValidate="TextBox1">
52:               </asp:RequiredFieldValidator>
53:               <asp:RangeValidator         id="RangeValidator1" 
54:                                           style="Z-INDEX: 105; LEFT: 34px; POSITION: absolute; TOP: 170px"
55:                                           runat="server" 
56:                                           ErrorMessage="Bitte geben Sie eine Ganzzahl 0 <= 100 ein!"
57:                                           MinimumValue="0" 
58:                                           MaximumValue="100"
59:                                           ControlToValidate="TextBox1" 
60:                                           Type="Integer">
61:               </asp:RangeValidator>
62:           </form>
63:       </body>
64:   </HTML>

sowie der Code der zugehörigen CodeBehind-Datei (.cs):

 
1:       public class StatBar : System.Web.UI.Page
2:       {
3:           protected System.Web.UI.WebControls.Table Table1;
4:           protected System.Web.UI.WebControls.Image img1;
5:           protected System.Web.UI.WebControls.TextBox TextBox1;
6:           protected System.Web.UI.WebControls.Button Button1;
7:           protected System.Web.UI.WebControls.RequiredFieldValidator RequiredFieldValidator1;
8:           protected System.Web.UI.WebControls.RangeValidator RangeValidator1;
9:           protected System.Web.UI.WebControls.Image img2;
10:  
11:           private void Page_Load(object sender, System.EventArgs e)
12:           {
13:               // Hier Benutzercode zur Seiteninitialisierung einfügen
14:               if(!IsPostBack)
15:               {
16:                   Table1.Visible=false;
17:               }
18:               else
19:               {
20:                   Table1.Visible=true;
21:               }
22:               
23:           }
24:       
25:           private void Button1_Click(object sender, System.EventArgs e)
26:           {
27:               img1.Width=int.Parse(TextBox1.Text);
28:               img2.Width=100-int.Parse(TextBox1.Text);
29:           }
30:       }

Currently rated 1.0 by 3 people

  • Currently 1/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Comments are closed