ASP.NET画图系列之另类Pie图(圆饼图)

 今天要实现的这个Pie图,它其实不是真正意义上的那种"画",就是跟我们在.NET里用Graphics结合Bitmap来实现一张图完全不一样,它是按照某种规则最后用Js来实现的,但它实现的效果较前面要好的多,gfreesky个人觉得这才是真正意义上的"圆饼图",之前的那个看不出"饼状",充其量也就是个圆图而已,而这个效果的确很棒,最主要的是实现起来超级简单,特拿来与君分享,之后,你可以对其进行扩展.如果对此你有什么更好的想法或意见,欢迎你给我留言或者Email给我,地址是:[e-mail]

好了,我们切入今天的主题吧,还是让你看看效果再说,看看我说的正确与否!

怎么样效果不错吧!

现在我们来看看"她"是怎么出来的

首先看页面部分

<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个页面,它里面的代码很长不方便贴出,如果感兴趣的朋友,请留言,我可以

单独发给您.

欢迎大家参与学习和探讨!