ZedGraph用法

我们现在的项目是.NET1.1开发的.我在网上找了一天也没有发现一个例子,下面我将介绍下其在ASP.NET下的用做WEB控件的用法
step 1.先将它提供的两个DLL文件添加引用

 

step 2:在Project中引用控件

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

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

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

 

Step3:设置属性

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


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


Step4:引用控件

这几个东西，你就不要丢了，记得搞上去

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


Step5:初始化


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

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

    }

注意：这只是放置一张ZedGraph中生成的图片，那假如是放两个呢？两个就要加一个喔

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

    }

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

protected void Page_Load(object sender, EventArgs e)
    {
        

        InitializeComponent();

    }

Step6:绑定数据

 

cs具体代码如下：

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using ZedGraph;
using ZedGraph.Web;
namespace datagrid_study
{
 /// <summary>
 /// ZedGraph 的摘要说明。
 /// </summary>
 public class ZedGraph : System.Web.UI.Page
 {
  protected ZedGraphWeb ZedGraphWeb2;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   
  }
 
  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.ZedGraphWeb2.RenderGraph += new ZedGraphWebControlEventHandler(this.OnRenderGraph);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  private void OnRenderGraph(ZedGraphWeb zgw, Graphics g, MasterPane masterPane)     
  {
   GraphPane myPane = masterPane[0];
   myPane.Title.Text = "销售统计";
   myPane.XAxis.Title.Text = "区域";
   myPane.YAxis.Title.Text = "销售总额: 元";           
   PointPairList list = new PointPairList();
   PointPairList list2 = new PointPairList();   
   PointPairList list3 = new PointPairList();   
   Random rand = new Random();          
   for (double x = 0; x < 5; x += 1.0)      
   {   double y = rand.NextDouble() * 100;       
    double y2 = rand.NextDouble() * 100;      
    double y3 = rand.NextDouble() * 100;           
    list.Add(x, y);            
    list2.Add(x, y2);            
    list3.Add(x, y3);          
   }   
   //线条
   LineItem myCuve=myPane.AddCurve("My Curve",list, Color.DarkGreen, SymbolType.None);
   LineItem myCuve1=myPane.AddCurve("My Curve1",list2, Color.Blue, SymbolType.Circle);
   LineItem myCuve2=myPane.AddCurve("My Curve2",list3, Color.Red, SymbolType.Triangle);
   masterPane.AxisChange();

   //柱状图
   /*
   //BarItem myCurve = myPane.AddBar("购买", list, Color.Blue);          
   //myCurve.Bar.Fill = new Fill(Color.Blue, Color.White, Color.Blue);         
   //BarItem myCurve2 = myPane.AddBar("续费", list2, Color.Red);         
   //myCurve2.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red);       
   //BarItem myCurve3 = myPane.AddBar("升级", list3, Color.Green);        
   //myCurve3.Bar.Fill = new Fill(Color.Green, Color.White, Color.Green); 
       
   /*myPane.XAxis.MajorTic.IsBetweenLabels = true;          
   string[] labels = { "域名", "主机", "数据库", "邮局", "套餐" };       
   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);
 
   masterPane.AxisChange(g);   */
  }
 }
}

 

 

数据绑定：

Use the DataSourcePointList to access database data

From ZedGraphWiki

Jump to: navigation, search

It is often desirable to access database data directly by ZedGraph. This saves the trouble of having to copy and convert the data into a PointPairList class. This is done using the DataSourcePointList class, which is an IPointList interface type. This means that you can use a DataSourcePointList in place of a PointPairList when you call the GraphPane.AddCurve(), GraphPane.AddBar(), etc. methods.

The DataSourcePointList is intended to be very simple to use. All you do is create an instance of a DataSourcePointList, specify the data source name, and then you specify the column names in the data table that will be used for each property. The following are the pertinent properties in the DataSourcePointList:

DataSource 

typically the name of a DataTable containing the data of interest. This can also be an ArrayList or other data collection type.

XDataMember 

the name of the column in DataSource that will contain the PointPair.X data values

YDataMember 

the name of the column in DataSource that will contain the PointPair.Y data values

ZDataMember 

the name of the column in DataSource that will contain the PointPair.Z data values

TagDataMember 

the name of the column in DataSource that will contain the PointPair.Tag data values

The sample source code below demonstrates the use of these properties.

For an example, we will use the Northwind database, which is a sample MS access database. First, you need to link the database into your Visual Studio 2005 project with the following steps:

1. Right-click on your project in the solution explorer and select "Add Existing Item..."
2. Set the file type to "Data Files", navigate to the folder that contains the Northwind.mdb file, select the file and click "Add"
3. Open up the Tables tree, and check-mark the "Orders" table
4. Leave the dataset name as the default ("NorthwindDataSet")
5. Click "Finish"

You now have a "NorthwindDataSet" class added to your project, along with a table adapter that will fill a data table with data from the Orders table.

The following demonstates how to generate a graph from the database data using the DataSourcePointList. Once the graph is displayed, you will be able to see a scatter plot showing the freight cost versus order date. If you mouse-over the individual points, you will see that the tooltips are sourced from the "ShipName" column of the data table.

private void CreateGraph_DataSource( ZedGraphControl z1 )
{
   GraphPane myPane = z1.GraphPane;

   // Set the titles
   myPane.Title.Text = "DataSourcePointList Test";
   myPane.XAxis.Title.Text = "Date";
   myPane.YAxis.Title.Text = "Freight Charges ($US)";

   // Create a new DataSourcePointList to handle the database connection
   DataSourcePointList dspl = new DataSourcePointList();
   // Create a TableAdapter instance to access the database
   NorthwindDataSetTableAdapters.OrdersTableAdapter adapter =
            new NorthwindDataSetTableAdapters.OrdersTableAdapter();
   // Create a DataTable and fill it with data from the database
   NorthwindDataSet.OrdersDataTable table = adapter.GetData();

   // Specify the table as the data source
   dspl.DataSource = table;
   // The X data will come from the "OrderDate" column
   dspl.XDataMember = "OrderDate";
   // The Y data will come from the "Freight" column
   dspl.YDataMember = "Freight";
   // The Z data are not used
   dspl.ZDataMember = null;
   // The Tag data will come from the "ShipName" column
   // (note that this will just set PointPair.Tag = ShipName)
   dspl.TagDataMember = "ShipName";

   // X axis will be dates
   z1.GraphPane.XAxis.Type = AxisType.Date;

   // Make a curve
   LineItem myCurve = z1.GraphPane.AddCurve( "Orders", dspl, Color.Blue );
   // Turn off the line so it's a scatter plot
   myCurve.Line.IsVisible = false;

   // Show the point values.  These are derived from the "ShipName" database column,
   // which is set as the "Tag" property.
   z1.IsShowPointValues = true;

   // Auto set the scale ranges
   z1.AxisChange();
}