GridView+ZedGraph【转】

edgraph图表控件的强大功能令人出乎意料&＃xff0c;与OWC相比我想应该毫不逊色&＃xff0c;近来需求要求作出相关数据统计&＃xff0c;不想使用BI这类的强大东西&＃xff0c;所以搜索到 了免费的开源的Zedgraph控件。使用起来也非常方便&＃xff0c;生成的效果可以说是五花八门&＃xff0c;千姿百态。废话少说&＃xff0c;先看看俺生成的样子.

图1:


图2:



图3:




这 些根据俺的需求与相关统计数据&＃xff0c;与Gridview结合起来绘制出来的图&＃xff0c;而从此控件的官方网站中&＃xff0c;我们还可以看到zgraph不仅能在WebForm中 实现图表功能&＃xff0c;在WinForm中同样可以实现&＃xff0c;我在这里就只介绍一下WebForm的使用了。&＃xff08;而对应WinForm的使用&＃xff0c;官方的Wiki里有很好的 example有VB的啊&＃xff0c;有C#的啊&＃xff0c;这里就不用啰嗦了)

图4:



网 上在介绍Zedgraph在webForm中使用的大多数是根据Zedgraph自身所带的数据实现&＃xff0c;没有与Net的相关数据控件进行结合&＃xff0c;我在这里就根 据自己在project中所使用的gridview与Zedgraph使用的心得&＃xff0c;与大家一起分享一下.同时欢迎大家多多指教&＃xff0c;指正错误。

Step1:下载Zgraph控件 

Zgraph控件现在已经出到5.0.10版本了&＃xff0c;分WinForm版和WebForm两种版本&＃xff0c;你可以直接到官方下载&＃xff0c;也可以在我这下载哈

本站下载地址&＃xff1a;http://www.dezai.cn/lesson_info.asp?SoftID&＃61;71  (俺可是好人&＃xff0c;不会放虫在里面)

官方下载地址&＃xff1a;http://sourceforge.net/project/showfiles.php?group_id&＃61;114675

Step2:在Project中引用控件

一般情况下&＃xff0c;此控件应该是使用在表现层&＃xff08;UI层&＃xff09;&＃xff0c;所以你可以直接在你的UI层直接引用&＃xff0c;当然&＃xff0c;为了你方便使用&＃xff0c;你可以先把他加到控件箱里头(ToolBox)

方法&＃xff1a; 对着控件箱右键点击->选择Choose Item -> 浏览 ->找到你下载的控件-> 选择 就可以了

这样你就可以在控件箱里看到ZedGraph的图标了&＃xff0c;你就可以像其它控件一样使用拖拽了






上面说了这么多废话都是前奏&＃xff0c;我们还没开始真正使用。


Step3:设置属性

先把控件拖拉到页面中或用户控件中,ZedGraph的属性很多&＃xff0c;我这里只说明一下常用的几个属性哈&＃xff0c;其实大多数是默认的就OK的&＃xff0c;大多数都是对图表的外表进行相关设置&＃xff0c;如果你想做出非常精美的图表&＃xff0c;那就要对这些属性下一番功夫了。


ID:控件ID
BarBase: 设计图表的基准轴&＃xff0c;默认为X
BarType:图表的类型&＃xff08;饼图&＃xff0c;柱状图&＃xff0c;曲线图等等)
Title:图表标题
OutPutFormat:输出的图表文件类型(Png,Gif,Jpeg,Ico)
width:图表宽度
height:图表高度
ChartFill: 图表背景直充&＃xff08;俺根据字面理解&＃xff0c;可能不太准确)
ChartBoder: 设计图表边框样式
lineType:线条类型...... ....... 
(老实说&＃xff0c;我一般在提供的属性里面只是去整宽度跟高度&＃xff0c;其它的就很少动了&＃xff09;


Step4:引用控件

这几个东西&＃xff0c;你就不要丢了&＃xff0c;记得搞上去

using ZedGraph;
using ZedGraph.Web;
using System.Drawing;
using System.Drawing.Imaging;


Step5:初始化


不管你在页面中(aspx)直接使用&＃xff0c;还是在用户控件中(ascx)&＃xff0c;均要对ZedGraph进行初始化操作&＃xff0c;其实很简单&＃xff0c;你就把下面这段COPY就到你的CS里面就可以了

 private void InitializeComponent()
    {
        this.ZedGraphWeb1.RenderGraph &＃43;&＃61; new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph);//注册事件
        this.Load &＃43;&＃61; new System.EventHandler(this.Page_Load);

    }

注意&＃xff1a;这只是放置一张ZedGraph中生成的图片&＃xff0c;那假如是放两个呢&＃xff1f;两个就要加一个喔

   private void InitializeComponent()
    {
         this.ZedGraphWeb1.RenderGraph &＃43;&＃61; new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph1);//注册事件
        this.ZedGraphWeb2.RenderGraph &＃43;&＃61; new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph2);//注册事件
        this.Load &＃43;&＃61; new System.EventHandler(this.Page_Load);

    }

当你COPY了这段代码后&＃xff0c;还要记得在page_load()中加载

protected void Page_Load(object sender, EventArgs e)
    {
        

        InitializeComponent();

    }

Step6:绑定数据

之 前在网上找到的相关教程中90%是采用官主提供的默认数组数据绑定的&＃xff0c;最好的绑定接口是IList&＃xff0c;由于我这没必要用我就没去研究哈&＃xff0c;有兴趣的兄弟们可去 去试一下&＃xff0c;ZedGraph绑定的数据源可以是很多&＃xff0c;起初我以为只能绑定DataSet&＃xff0c;但后面还是可以绑定DataReader的&＃xff0c;不仅如此&＃xff0c;数组就更 不在话下了。我这里只用DataReader&＃xff0c;不过话说回来&＃xff0c;所呈现的数据都是以数组整的

6.1 数据源绑定&＃xff0c;这个就不用多说了

我在前台加了一个GridVidw&＃xff0c;其Gridview的数据源是一个dataReader

 protected void Show()
    {
        this.gdvEduList.DataSource &＃61; FeedBackInfoDataCount.EduDataCount();
        gdvEduList.DataBind();
    }


记得在page_load()加载&＃xff0c;那么我们的page_load就这样的啦

 protected void Page_Load(object sender, EventArgs e)
    {
        Show();

        InitializeComponent();
    }

6.2设定图表数组绑定

这个就是核心代码了

 private void OnRenderGraph(ZedGraphWeb zgw, Graphics g, MasterPane masterPane)
    {
        GraphPane myPane &＃61; masterPane[0];

        myPane.Title.Text &＃61; "消费者学历统计";  //设计图表的标题
        myPane.XAxis.Title.Text &＃61; "学历类型"; //X轴标题
        myPane.YAxis.Title.Text &＃61; "人数"; //Y轴标题

        PointPairList list &＃61; new PointPairList(); //初始化一个PointPariList对象&＃xff0c;说白了就是一条曲线或一条柱子要生出来了

        //PointPairList list2 &＃61; new PointPairList();  如果你要在一个图表城显示多条曲线或柱子你就可以增加一个PointPariList对像&＃xff0c;相对应下面的 y2,List2也是这个List相关的东西了

        //PointPairList list3 &＃61; new PointPairList(); //原理同上


        for (int x &＃61; 0; x & lt; this.gdvEduList.Rows.Count; x&＃43;&＃43;) //循环,x的初始值为0,最终值是我数据源中的记录总数 这里主要是 gdvEdulist.Rows.Count的设定&＃xff0c;根据你的数据源来设定
        {

            int careerCount &＃61; Convert.ToInt32(this.gdvEduList.Rows[x].Cells[1].Text.Trim()); 这 个是获取所对应的每条柱子所对应的数据的文本&＃xff0c;我是从gridvew中直接取到的

            

            int y &＃61; careerCount;//这句就是要充的值了&＃xff0c;将CareerCount的值都整到Y里面去了&＃xff0c;其实你也可以直接将值赋予Y&＃xff0c;注意&＃xff0c;这里的Y应该代表Y轴

            //double y2 &＃61; rand.NextDouble() * 300;
            //double y3 &＃61; rand.NextDouble() * 300;

            list.Add(x, y); // 将XY的值整到list里面存储起来


            //list2.Add(x, y2);
            //list3.Add(x, y3);
        }

        BarItem myCurve &＃61; myPane.AddBar("数据统计", list, Color.Green); //增加一个Bar,List里面是不是包含了&＃xff08;X&＃xff0c;Y)

        myCurve.Bar.Fill &＃61; new Fill(Color.Green, Color.Green, Color.Green); //将颜色直译


        //BarItem myCurve2 &＃61; myPane.AddBar("续费", list2, Color.Red);
        //myCurve2.Bar.Fill &＃61; new Fill(Color.Red, Color.White, Color.Red);
        //BarItem myCurve3 &＃61; myPane.AddBar("升级", list3, Color.Green);
        //myCurve3.Bar.Fill &＃61; new Fill(Color.Green, Color.White, Color.Green);

        myPane.XAxis.MajorTic.IsBetweenLabels &＃61; true; //这个我不知道乍么解释&＃xff0c;不好意思

        string[] labels &＃61; new string[gdvEduList.Rows.Count];  

        for (int i &＃61; 0; i < this.gdvEduList.Rows.Count; i&＃43;&＃43;)  //这个循环主要是取到里面的说明文字&＃xff0c;用了一个数组的方法
        {
           

            labels[i] &＃61; this.gdvEduList.Rows[i].Cells[0].Text.Trim();

        }


   //以下这些是无关痛庠的属性设置了&＃xff0c;一般默认就可以

        myPane.XAxis.Scale.TextLabels &＃61; labels; 

        myPane.XAxis.Type &＃61; AxisType.Text;

        myPane.Fill &＃61; new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f);

        myPane.Chart.Fill &＃61; new Fill(Color.White, Color.White, 45.0f);


        masterPane.AxisChange(g); //这句话不可少


    }

当你整完上页这段后&＃xff0c;你就可以得到下面这个东西了




我想大家应该大至明白乍样用这东西了吧。

发个源码包&＃xff1a;点击下载此文件


上面这个是一个柱子的生成图&＃xff0c;那其它图呢&＃xff1f;

我只把主要代码丢出来给大家哈&＃xff0c;有错你就要说给我听哈&＃xff0c;不要我会贬你的哈

饼图&＃xff1a;

点击下载此文件

多条柱子的&＃xff1a;


点击下载此文件

WebZedGraphDemo

点击下载此文件


其实WinForm的跟WebForm的用法差不多&＃xff0c;大家只要认真比较一下&＃xff0c;就很容易从官方的example里面的提供的在WinForm的使用转成WebForm的啦&＃xff0c;俺们一起努力吧.


相关IT同仁的学习文章&＃xff0c;大家都可以看看哈


ZedGraph Wiki:

http://zedgraph.org/wiki/index.php?title&＃61;Main_Page

&＃xff08;codeproject.com)   http://www.codeproject.com/csharp/ZedGraph.asp 

 ZedGraph 总论(WinForm篇)http://blog.csdn.net/tjvictor/archive/2006/11/24/1412550.aspx

ZedGraph在Asp.net中的应用 http://tech.it168.com/n/2007-06-13/200706131521812.shtml

ZedGraph在Asp.net中的应用(2) http://www.cnblogs.com/wxukie/archive/2007/05/16/748922.html