我要评论先给大家来个最终效果：
实现效果，首先准备一张图片，高度为25pixel,宽度为1至3pixel渐变的图片。可以这里下载。
还要准备数据：
dictionary<int, int> datas
{
get
{
dictionary<int, int> d = new dictionary<int, int>();
d.add(1, 35);
d.add(2, 45);
d.add(3, 20);
return d;
}
}
ok,数据准备完了，在aspx里放三个label控件，当然你可以显示在其它控件或是标签中，有一点要注意的是width="300"，它是渐变图片在100%的宽度：
<asp:label id="label1" runat="server" style="margin: 3px;" text="" width="300" borderwidth="1"></asp:label><br /> <asp:label id="label2" runat="server" style="margin: 3px;" text="" width="300" borderwidth="1"></asp:label><br /> <asp:label id="label3" runat="server" style="margin: 3px;" text="" width="300" borderwidth="1"></asp:label><br />
把数据显示于label上：
protected void page_load(object sender, eventargs e)
{
data_binding();
}
private void data_binding()
{
int totals = 100;
foreach (keyvaluepair<int, int> kvp in datas)
{
double rate = kvp.value / (double)totals;
double width = rate * 300;
switch (kvp.key)
{
case 1:
this.label1.text = gradientimage(width, rate);
break;
case 2:
this.label2.text = gradientimage(width, rate);
break;
case 3:
this.label3.text = gradientimage(width, rate);
break;
}
}
}
private string gradientimage(double width, double rate)
{
return "<img height='21' src='images/bar.gif' width='" + width + "' align='absmiddle'> " + rate.tostring("p");
}
以上就是asp.net实现渐变图片的方法，希望对大家的学习有所帮助。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论