今天要实现的这个Pie图,它其实不是真正意义上的那种"画",就是跟我们在.NET里用Graphics结合Bitmap来实现一张图完全不一样,它是按照某种规则最后用Js来实现的,但它实现的效果较前面要好的多,gfreesky个人觉得这才是真正意义上的"圆饼图",之前的那个看不出"饼状",充其量也就是个圆图而已,而这个效果的确很棒,最主要的是实现起来超级简单,特拿来与君分享,之后,你可以对其进行扩展.如果对此你有什么更好的想法或意见,欢迎你给我留言或者Email给我,地址是:gfreesky@gmail.com
好了,我们切入今天的主题吧,还是让你看看效果再说,看看我说的正确与否!
怎么样效果不错吧!
现在我们来看看"她"是怎么出来的
首先看页面部分
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Height="164px"
Width="508px">
</asp:GridView>
<br />
<br />
<iframe src="Pie.htm" width="100%" height="400px" scrolling="no"
id="pie" ></iframe>
</div>
</form>
里面有个GridView和iframe,这里的GridView不是必须的,如果你只是想看这个图的效果,可以不加这个GridView
这个Pie.htm是什么呢?先不去管它,我们接着看后台代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
DataSet ds = GetDS();
this.GridView1.DataSource = ds;
this.GridView1.DataBind();
if (ds.Tables[0].Rows.Count != 0)
{
pie(ds);
}
}
private DataSet GetDS()
{
//这里请大家自行解决,只需要注意的是你的SQL语句,第一个字段为key,第二个字段为value
}
//将ds中的值写入到array_name和array_Money
private void pie(DataSet ds)
{
StringBuilder sb = new StringBuilder();
sb.Append("<script>");
sb.Append("var array_name = new Array();");
sb.Append("var array_Money = new Array();");
DataRowCollection drc = ds.Tables[0].Rows;
DataRow dr;
string saleName = "";
string saleNum = "";
for (int i = 0; i < drc.Count; i++)
{
dr = drc[i];
saleName = dr[0].ToString();
saleNum = dr[1].ToString();
sb.Append("array_name[" + i + "]=\"" + saleName + "\";");
sb.Append("array_Money[" + i + "]={\"" + saleName + "\":"
+ saleNum + "};");
}
sb.Append("</script>");
Response.Write(sb);
}
这段代码不复杂,相信大家一眼就能看懂,如果你真的看不懂,之后可以留言,我会给你解答.
探讨:
我在这里要提醒的是,上面只是我的做法,你也可以不用传一个DS,比如一个字典或者其他的一个数据集合,只要能给
array_name和array_Money写入值就可以;另外一点它还可以扩展成一个页面显示多个这样的图,比如你可以显示
一个总计图和均值图在一个页面里面,这时候如果在页面里添加2个TextBox和Button,就可以按照时间来显示不同
的数据了,其实gfreesky已经实现了这样的效果,之所以没有细说,是希望您用自己的方式方法对其扩展,毕竟每个人的
想法做法可能不一;最后想提的是里面涉及2个页面,它里面的代码很长不方便贴出,如果感兴趣的朋友,请留言,我可以
单独发给您.
欢迎大家参与学习和探讨!