ZedGraph在Web中的使用

上一篇SQL实现分组统计查询（按月、小时分组） 中介绍了按月和小时为单位怎样实现分组查询，在本文中会实现将上文查询的结果以图表的形式显示在页面上。在页面上显示图标有很多种解决方案，office的owc组建、自己写代码、或者是第三方的控件。本文中将使用ZedGraph控件来实现。选择ZedGraph有两个原因：

1 该控件是开源的，在必要的时候可以根据自己的需要来修改；

2 该控件所显示的图片是绘出来的，而不是生成的图片。

下载地址：http://sourceforge.net/project/showfiles.php?group_id=114675

1 将控件引用到项目中，本示例使用的是5.1.5版。

在工具栏下方的空白处点击右键—>添加选项卡,命名为ZedGraph

                                

在ZedGraph选项卡点右键—>选择项…,在弹出窗口中选择下载下来的ZedGraph.Web.dll文件。

 

   

 

2 在项目中新建一aspx页面，命名为Year.aspx,将刚添加的ZedGraph控件拖到页面中，并在页面中添加一个文本框和一个按钮，文本框用来选择年份。

3 切换到代码视图，添加如下代码： 

 

namespace  ZedGraphDemo
{
     public   partial   class  Year : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             this .ZgwYear.RenderGraph  +=   new  ZedGraphWebControlEventHandler(ZgwYear_RenderGraph);
        }

         void  ZgwYear_RenderGraph(ZedGraphWeb webObject, System.Drawing.Graphics g, MasterPane pane)
        {
            GraphPane myPane  =  pane[ 0 ];

             //  标题
            myPane.Title.Text  =   " 每年分析（月为单位） " ;
            myPane.XAxis.Title.Text  =   " 时间 " ;
            myPane.YAxis.Title.Text  =   " 访问量 " ;

             //  坐标对集
            PointPairList list  =   new  PointPairList();
             // PointPairList list1 = new PointPairList();
             // PointPairList list2 = new PointPairList();

             // 从数据库中获取数据集
            DataTable dtYear  =  GetData();
             if  (dtYear  ==   null  )
                 return ;
             for  ( int  i  =   0 ; i  <  dtYear.Rows.Count; i ++ )
            {
                list.Add(Convert.ToDouble(i), Convert.ToDouble(dtYear.Rows[i][ " Count " ]));
                 // 如果有多种类型，可以添加多个
                 // list1.Add(Convert.ToDouble(i), Convert.ToDouble(dtYear.Rows[i]["Count1"]));
                 // list2.Add(Convert.ToDouble(i), Convert.ToDouble(dtYear.Rows[i]["Count2"]));
            }

            BarItem myBar  =  myPane.AddBar( " 页面访问 " , list, Color.Blue);
             // BarItem myBar1 = myPane.AddBar("", list1, Color.Red);
             // BarItem myBar2 = myPane.AddBar("", list2, Color.Yellow);

            myBar.Bar.Fill  =   new  Fill(Color.Blue, Color.White, Color.Blue);
             // myBar1.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red);
             // myBar2.Bar.Fill = new Fill(Color.Yellow, Color.White, Color.Yellow);

            myPane.XAxis.MajorTic.IsBetweenLabels  =   true ;
             //  X轴Label
             string [] labels  =   new   string [] {  " 1月 " ,  " 2月 " ,  " 3月 " ,  " 4月 " ,  " 5月 " ,  " 6月 " , 
                                              " 7月 " ,  " 8月 " ,  " 9月 " ,  " 10月 " ,  " 11月 " ,  " 12月 "  };

             // 设置x轴刻度
            myPane.XAxis.Scale.TextLabels  =  labels;
            myPane.XAxis.Type  =  AxisType.Text;

             //  颜色填充
            myPane.Fill  =   new  Fill(Color.White, Color.FromArgb( 200 ,  200 ,  255 ),  45.0f );
            myPane.Chart.Fill  =   new  Fill(Color.White, Color.LightGoldenrodYellow,  45.0f );

            pane.AxisChange(g);

            myPane.YAxis.Scale.Max  +=  myPane.YAxis.Scale.MajorStep;
            BarItem.CreateBarLabels(myPane,  false ,  " f0 " );  // 在柱状图上方显示统计数
        }

         protected   void  btnQuerys_Click( object  sender, EventArgs e)
        {
            GetData();
        }

         private  DataTable GetData()
        {
            SqlHelper.ConnectionString  =  ConfigurationManager.AppSettings[ " ConnectionString " ].ToString();
            SqlParameter[] parameters  =   new  SqlParameter[ 1 ];

            parameters[ 0 ]  =   new  SqlParameter( " @Year " , SqlDbType.Int,  4 );
            parameters[ 0 ].Value  =   this .txtYear.Value.Trim().Length  ==   0   ?  DateTime.Now.Year : 
                                                            Convert.ToInt32(txtYear.Value.Trim());
            DataSet ds  =  SqlHelper.ExecuteDataset( " Counter_CounterYear " , parameters);
             if  (ds  !=   null   &&  ds.Tables.Count  >   0   &&  ds.Tables[ 0 ].Rows.Count  >   0 )
            {
                 return  ds.Tables[ 0 ];
            }
             else
            {
                 return   null ;
            }
        }
    }
}

 

4 在项目的根目录下创建一个名为ZedGraphImages的文件夹，只是作为ZedGraph绘图时的一个临时目录，并不会在该文件夹中生成图片，如果没有该文件夹会报异常。

 

代码下载