ZedGraph在Web中的使用

Sat, 06 Jun 2009 00:00:00 +0800

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

该控件是开源的，在必要的时候可以根据自己的需要来修改；
该控件所显示的图片是绘出来的，而不是生成的图片。

下载地址：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绘图时的一个临时目录，并不会在该文件夹中生成图片，如果没有该文件夹会报异常。

报表统计 on 冯威的博客

ZedGraph在Web中的使用