Grafische Anzeige eines prozentualen Ergebnisses

Written on September 13, 2003

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:

4:

5:

StatBar

6:

7:

8:

9:

10:

11:

12:

13: Bitte einen ganzzahligen Wert 0 <= 100 eingeben und *auf* den Button

14: klicken.

15:

23:

24:

25:

29:

30:

31:

35:

36:

37:

38:

41:

42:

46:

47:

52:

53:

61:

62:

63:

64:

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: }