gridview如何显示柱状图(如何使用绑定的值)
今天,我想在自己做的投票网站上显示柱状图,找了许多资料,终于成功!
前台页面:
<asp:GridView ID="GridView5" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource5"
ShowHeader="False" Width="370px" OnRowDataBound="GridView5_RowDataBound">
<Columns>
<asp:BoundField DataField="description" HeaderText="description" SortExpression="description">
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="total" HeaderText="total" SortExpression="total">
<ItemStyle Width="100px" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>---这里是第一种方式需要的咚咚,不知道取消后是否能添加。
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:mwvoteConnectionString %>"
SelectCommand="SELECT [description], [total] FROM [computersurveyitem] WHERE ([class] = @class)">
<SelectParameters>
<asp:Parameter DefaultValue="6" Name="class" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
后台页面:
第一种:
protected void GridView5_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//可以在这里访问数据库的其它字段的值。主要是取得数据
DataRowView gv = (DataRowView)e.Row.DataItem;
string itemSeleted = gv.Row["total"].ToString();
Image im = new Image();
im.ID = "image1";
im.ImageUrl = "~/images2/bar.gif";//一个图片,只有1px。
im.Width = Unit.Parse(itemSeleted + "px");
im.Height = Unit.Parse("13px");//一定要转换。今天又学了一招。
e.Row.Cells[2].Controls.Add(im);
}
}
第二种:建立一个模板。(网上找到一个downdrop的例子,修改为自己用的)
public class GridViewTemplate : ITemplate
{
private DataControlRowType templateType;
private string columnName;
public GridViewTemplate(DataControlRowType type, string colname)
{
templateType = type;
columnName = colname;
}
public void InstantiateIn(System.Web.UI.Control container)
{
switch (templateType)
{
case DataControlRowType.Header:
Literal lc = new Literal();
lc.Text = columnName;
container.Controls.Add(lc);
break;
case DataControlRowType.DataRow:
Image image = new Image();
image.ID = "image123";
image.ImageUrl = "~/images2/bar.gif";
image.Height = Unit.Parse("13px");
container.Controls.Add(image);
break;
default:
break;
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TemplateField customField = new TemplateField();
customField.ShowHeader = false;
customField.HeaderTemplate = new GridViewTemplate(DataControlRowType.Header, "动态添加列");
customField.ItemTemplate = new GridViewTemplate(DataControlRowType.DataRow, "");
customField.ItemStyle.Width = Unit.Parse("100px");
GridView1.Columns.Add(customField);
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//可以在这里访问数据库的其它字段的值,网上搜索来的。
DataRowView gv = (DataRowView)e.Row.DataItem;
string itemSeleted = gv.Row["total"].ToString();
Image dr = (Image)e.Row.FindControl("image123");//image123与模板对应起来。
temp += itemSeleted;
dr.Width = Unit.Parse(itemSeleted+"px");
}
Label1.Text+= temp;
}
第二种方法灵活度高,第一种简单。
不知道还有没有更好的方法。