C# 页面显示简易的统计图表（使用image控件实现）

时间：2010-12-22 来源：有你的城市

（Visual Studio 2005）

其中有页面的功能是按照年龄，学历，性别等统计人员分布状况。

我开始用数据集DataSetAge.xsd 配合”报表“（Report1.rdlc）项目

在 ReportViewer控件里实现的，显示出来的结果带有报表控件本身的导出、刷新等功能，

但是觉得不如像单元格里能更灵活的控制，所以还是参照了旧的ASP页面里的方法，

利用 image控件的部分显示（根据百分比与原始图片的宽度乘积的值设置image的宽度）来表示条状图。

浏览后的结果如下图所示：

旧ASP页面的代码如下，变量的定义与数值来源部分代码已略去（在此代码中把条形图放到超链接内，可以跳转到以当前年龄段为

参数抓取的员工信息列表页面），

代码

 1 <Table Border=1 CellPadding=4 Cellspacing=1>
 2   <TR Bgcolor=Yellow>
 3     <TD align="Center">年齡分佈情形</TD>
 4     <TD align="Center">人數分佈</TD>
 5     <TD align="Center">百分比(100%)</TD>
 6   </TR>
 7   <TR>
 8     <TD align="Center">50歲以上</TD>
 9     <TD align="Center"><% =Y50 %>人</TD>
10     <TD><a href="查詢年齡.ASP?CT1=8"><Img src="../images/100.gif" Height=16 Width=<% =Per01*400 %> Align=TextTop>(<% =FormatNumber(Per01*100,2,True) %>)</a></TD>
11   </TR>
12   <TR>
13     <TD align="Center">46-50歲</TD>
14     <TD align="Center"><% =Y46 %>人</TD>
15     <TD><a href="查詢年齡.ASP?CT1=7"><Img src="../images/100.gif" Height=16 Width=<% =Per02*400 %> Align=TextTop>(<% =FormatNumber(Per02*100,2,True) %>)</a></TD>
16   </TR>
17   <TR>
18     <TD align="Center">41-45歲</TD>
19     <TD align="Center"><% =Y41 %>人</TD>
20     <TD><a href="查詢年齡.ASP?CT1=6"><Img src="../images/100.gif" Height=16 Width=<% =Per03*400 %> Align=TextTop>(<% =FormatNumber(Per03*100,2,True) %>)</a></TD>
21   </TR>......

C#中以同样原理来实现 aspx中画出table来布局分组，

代码

 1 <table width="780px" border="1">
 2            <tr><td style="width:120px; background-color: #ffff66;">年資分佈情形</td><td style="width:80px; background-color: #ffff66;">人數分佈</td><td style="width: 80px; background-color: #ffff66">百分比（100%）</td></tr>
 3            <tr><td style=""> >50歲以上</td><td style="">>
 4                   <asp:Label ID="lbl50plus" runat="server"></asp:Label></td>
 5                    <td ><asp:Image ID="Image50plus" runat="server"  ImageUrl="~/humanadd/Image/100.jpg"  />
 6                   <asp:Label ID="Label50plus" runat="server"></asp:Label> </td></tr>
 7            <tr><td style="">>46-50歲</td><td >
 8                <asp:Label ID="lbl46to50" runat="server"></asp:Label></td><td>
 9                <asp:Image ID="Image46to50" runat="server"  ImageUrl="~/humanadd/Image/100.jpg"  /> 
10               <asp:Label ID="Label46to50" runat="server"></asp:Label></td></tr>......

cs 后台代码中从数据库中获取相关数据，计算比重，结合原始图片（100%）宽度（本例图片的原始宽度为300px）,

设置 image.width

下面代码同样省略里从数据库获取相关数据，参数及页面控件初始化的代码

1 case "41-45": Image41to45.Width = (Unit)(percent * 300); Image41to45.Height = 15; lbl41to45.Text = cnt + "人"; Label41to45.Text = "(" + (percent * 100) + "%)"; break;
2 case "46-50": Image46to50.Width = (Unit)(percent * 300); Image46to50.Height = 15; lbl46to50.Text = cnt + "人"; Label46to50.Text = "(" + (percent * 100) + "%)"; break;
3 case "50+": Image50plus.Width = (Unit)(percent * 300); Image50plus.Height = 15; lbl50plus.Text = cnt + "人"; Label50plus.Text = "(" + (percent * 100) + "%)"; break;

原理很简单，这里说的啰嗦了点。