正式着手研究ZedGraph控件,说到做到...![](/Emoticons/tongue_smile.gif)
因为项目需要,主要Web程序中使用,而且基本上的柱状图、折线图与饼图。所目标是学会这三种图的设计。当然,首先是掌握控件的使用,然后才可能对控件作自定义改造。
查照了一下 王旭 的博客,他贴出了较详细的源码,按照其提供的源码,基本上能做出效果。
主要设计步聚
1、添加DLL引用:web工程中,要添加两个DLL的引用:ZedGraph 与 ZedGraph.Web。如图1所示:
![](/Emoticons/tongue_smile.gif)
因为项目需要,主要Web程序中使用,而且基本上的柱状图、折线图与饼图。所目标是学会这三种图的设计。当然,首先是掌握控件的使用,然后才可能对控件作自定义改造。
查照了一下 王旭 的博客,他贴出了较详细的源码,按照其提供的源码,基本上能做出效果。
主要设计步聚
1、添加DLL引用:web工程中,要添加两个DLL的引用:ZedGraph 与 ZedGraph.Web。如图1所示:
图1 DLL引用说明图
2、把ZedGraph.Web添加以控件面板中,以方便设计时直接拖拉。如何添加就不详细讲了。效果如图2所示。
图2 控件添加到工具箱中
3、把ZedGraph控件拖到页面设计器中,如图3所示。
图3 控件拖拉到页面设计器
4、页面HTML代码如下所示:
1
<%@ Register TagPrefix="cc1" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %>
2
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ZedGraphWeb1.WebForm1" %>
3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
4
<HTML>
5
<HEAD>
6
<title>WebForm1</title>
7
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
8
<meta content="C#" name="CODE_LANGUAGE">
9
<meta content="JavaScript" name="vs_defaultClientScript">
10
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
11
</HEAD>
12
<body MS_POSITIONING="GridLayout">
13
<form id="Form1" method="post" runat="server">
14
<FONT face="宋体">
15
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 112px; POSITION: absolute; TOP: 56px" cellSpacing="1"
16
cellPadding="1" width="300" border="1">
17
<TR>
18
<TD></TD>
19
<TD><FONT size="2">销售统计柱状图:</FONT></TD>
20
<TD></TD>
21
</TR>
22
<TR>
23
<TD></TD>
24
<TD>
25
<cc1:ZedGraphWeb id="ZedGraphWeb1" runat="server"></cc1:ZedGraphWeb></TD>
26
<TD></TD>
27
</TR>
28
<TR>
29
<TD></TD>
30
<TD></TD>
31
<TD></TD>
32
</TR>
33
</TABLE>
34
</FONT>
35
</form>
36
</body>
37
</HTML>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/None.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)
30
![](/Images/OutliningIndicators/None.gif)
31
![](/Images/OutliningIndicators/None.gif)
32
![](/Images/OutliningIndicators/None.gif)
33
![](/Images/OutliningIndicators/None.gif)
34
![](/Images/OutliningIndicators/None.gif)
35
![](/Images/OutliningIndicators/None.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/None.gif)
5、编码 页面C#代码,如下所示:
1
private void InitializeComponent()
2
{
3
this.ZedGraphWeb1.RenderGraph += new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph);//注册事件
4
this.Load += new System.EventHandler(this.Page_Load);
5![](/Images/OutliningIndicators/InBlock.gif)
6
}
7![](/Images/OutliningIndicators/None.gif)
8
//
..
9![](/Images/OutliningIndicators/None.gif)
10![](/Images/OutliningIndicators/None.gif)
11
private void OnRenderGraph(ZedGraphWeb zgw, Graphics g, MasterPane masterPane)
12
{
13
GraphPane myPane = masterPane[0];
14
15
myPane.Title.Text = "销售统计";
16
myPane.XAxis.Title.Text = "区域";
17
myPane.YAxis.Title.Text = "销售总额: 元";
18
19
PointPairList list = new PointPairList();
20
PointPairList list2 = new PointPairList();
21
PointPairList list3 = new PointPairList();
22
Random rand = new Random();
23
24
for (double x = 0; x < 5; x += 1.0)
25
{
26
double y = rand.NextDouble() * 100;
27
double y2 = rand.NextDouble() * 100;
28
double y3 = rand.NextDouble() * 100;
29
list.Add(x, y);
30
list2.Add(x, y2);
31
list3.Add(x, y3);
32
}
33
34
BarItem myCurve = myPane.AddBar("购买", list, Color.Blue);
35
myCurve.Bar.Fill = new Fill(Color.Blue, Color.White, Color.Blue);
36
BarItem myCurve2 = myPane.AddBar("续费", list2, Color.Red);
37
myCurve2.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red);
38
BarItem myCurve3 = myPane.AddBar("升级", list3, Color.Green);
39
myCurve3.Bar.Fill = new Fill(Color.Green, Color.White, Color.Green);
40
41
myPane.XAxis.MajorTic.IsBetweenLabels = true;
42
string[] labels = { "域名", "主机", "数据库", "邮局", "套餐" };
43
myPane.XAxis.Scale.TextLabels = labels;
44
myPane.XAxis.Type = AxisType.Text;
45
myPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f);
46
myPane.Chart.Fill = new Fill(Color.White, Color.LightGoldenrodYellow, 45.0f);
47
48
masterPane.AxisChange(g);
49
50
}
51![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
51
![](/Images/OutliningIndicators/None.gif)
说明:本代码例子是从 王旭 的博客中 摘引的。
6、运行效果如图4所示。
图4 运行效果
图形属性说明,示意如图5所示。
图5 控件属性示意图
好了,今天到此为止。