由于朋友需要把C1WebChart.替换掉,改用开源的ZedGraph控件.以下做一个示例,供大家参考:
步骤如下:
1、添加ZedGraph控件。如下图:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/zlp321002/AddDLL.jpg)
2、添加到控制面版。如下图:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/zlp321002/AddControl.jpg)
3、制作用户控件。
a> 建立一个命名为: DrawGrap.ascx 用户控件。
b> 通过控制面版,把ZedGraphWeb拖到默认页面。 如下图:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/zlp321002/DisGrapini.jpg)
c> 生成代码(DrawGrap.ascx)如下:
<%
@ Control Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
DrawGrap.ascx.cs
"
Inherits
=
"
DrawGrap
"
%>
<%
@ Register TagPrefix
=
"
zgw
"
Namespace
=
"
ZedGraph.Web
"
Assembly
=
"
ZedGraph.Web
"
%>
<
ZGW:ZEDGRAPHWEB id
=
"
zedGraphControl
"
runat
=
"
server
"
width
=
"
500
"
Height
=
"
375
"
RenderMode
=
"
ImageTag
"
/>
d> 生成代码(DrawGrap.ascx.cs)如下:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
using
System.Drawing;
using
ZedGraph;
using
ZedGraph.Web;
using
System.Collections.Generic;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/// <summary>
/// 显示统计图形类型
/// </summary>
public
enum
AnalyticsType
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
Line, //折线图
Bar, //柱状图
Pie //饼图
}
;
public
partial
class
DrawGrap : System.Web.UI.UserControl
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
Private Attribute#region Private Attribute
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 默认颜色种类
/// </summary>
private List<Color> defaultColors = new List<Color>();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 统计的个数
/// </summary>
private int Count;
#endregion
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
Public Property#region Public Property
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 统计图的名称
/// </summary>
public string Title;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 横轴的名称(饼图不需要)
/// </summary>
public string XAxisTitle;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 纵轴的名称(饼图不需要)
/// </summary>
public string YAxisTitle;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 显示的曲线类型:Line,Bar,Pie
/// </summary>
public AnalyticsType Type;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 折线图和柱状图的数据源
/// </summary>
public List<PointPairList> DataSource = new List<PointPairList>();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 饼图的数据源
/// </summary>
public List<double> ScaleData = new List<double>();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 各段数据的颜色
/// </summary>
public List<Color> Colors = new List<Color>();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 各段数据的名称
/// </summary>
public List<string> NameList = new List<string>();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 用于柱状图,每个圆柱体表示的含义
/// </summary>
public List<string> LabelList = new List<string>();
#endregion
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
zedGraphControl.RenderGraph += new ZedGraph.Web.ZedGraphWebControlEventHandler(zedGraphControl_RenderGraph);
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
private void InitDefaultColors()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
defaultColors.Add(Color.Red);
defaultColors.Add(Color.Green);
defaultColors.Add(Color.Blue);
defaultColors.Add(Color.Yellow);
defaultColors.Add(Color.YellowGreen);
defaultColors.Add(Color.Brown);
defaultColors.Add(Color.Aqua);
defaultColors.Add(Color.Cyan);
defaultColors.Add(Color.DarkSeaGreen);
defaultColors.Add(Color.Indigo);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 如果属性为空则初始化属性数据
/// </summary>
private void InitProperty()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
InitDefaultColors();
if (string.IsNullOrEmpty(Title))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Title = "未命名统计图";
}
if (string.IsNullOrEmpty(XAxisTitle))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
XAxisTitle = "横轴";
}
if (string.IsNullOrEmpty(YAxisTitle))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
YAxisTitle = "纵轴";
}
if (Type == AnalyticsType.Pie)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Count = ScaleData.Count;
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Count = DataSource.Count;
}
if (Colors.Count == 0 || Colors.Count != Count)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Random r = new Random();
int tempIndex = 0;
List<int> tempIndexList = new List<int>();
for (int i = 0; i < Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
tempIndex = r.Next(defaultColors.Count);
if (tempIndexList.Contains(tempIndex))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
i--;
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
tempIndexList.Add(tempIndex);
Colors.Add(defaultColors[tempIndex]);
}
}
}
if (NameList.Count == 0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (Type == AnalyticsType.Bar)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for (int i = 0; i < DataSource[0].Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
NameList.Add("第" + i.ToString() + "组");
}
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for (int i = 0; i < Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
NameList.Add("第" + i.ToString() + "组");
}
}
}
if (LabelList.Count == 0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for (int i = 0; i < Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
LabelList.Add("含义" + i.ToString());
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 画图
/// </summary>
/// <param name="webObject"></param>
/// <param name="g"></param>
/// <param name="pane"></param>
private void zedGraphControl_RenderGraph(ZedGraph.Web.ZedGraphWeb webObject, System.Drawing.Graphics g, ZedGraph.MasterPane pane)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
InitProperty();
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
GraphPane myPane = pane[0];
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
myPane.Title.Text = Title;
myPane.XAxis.Title.Text = XAxisTitle;
myPane.YAxis.Title.Text = YAxisTitle;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//if (true)
//{
// DrawMessage(myPane, "yiafdhaskjhfasfksahfasdlhfaslf lasgfasglgsadi");
// pane.AxisChange(g);
// return;
//}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
switch (Type)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
case AnalyticsType.Line:
DrawLine(myPane);
break;
case AnalyticsType.Bar:
DrawBar(myPane);
break;
case AnalyticsType.Pie:
DrawPie(myPane);
break;
default:
break;
}
pane.AxisChange(g);
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
Draw#region Draw
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 画折线图
/// </summary>
/// <param name="graphPane"></param>
private void DrawLine(GraphPane graphPane)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for (int i = 0; i < Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
graphPane.AddCurve(NameList[i], DataSource[i], Colors[i], SymbolType.None);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 画柱状图
/// </summary>
/// <param name="graphPane"></param>
private void DrawBar(GraphPane graphPane)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for (int i = 0; i < Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
graphPane.AddBar(LabelList[i], DataSource[i], Colors[i]).Bar.Fill = new Fill(Colors[i], Color.White, Colors[i]);
}
graphPane.XAxis.MajorTic.IsBetweenLabels = true;
string[] labels = NameList.ToArray();
graphPane.XAxis.Scale.TextLabels = labels;
graphPane.XAxis.Type = AxisType.Text;
graphPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f);
graphPane.Chart.Fill = new Fill(Color.White, Color.LightGoldenrodYellow, 45.0f);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 画饼图
/// </summary>
/// <param name="graphPane"></param>
private void DrawPie(GraphPane graphPane)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
graphPane.Fill = new Fill(Color.White, Color.Silver, 45.0f);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
graphPane.Legend.Position = LegendPos.Float;
graphPane.Legend.Location = new Location(0.95f, 0.15f, CoordType.PaneFraction, AlignH.Right, AlignV.Top);
graphPane.Legend.FontSpec.Size = 20f;
graphPane.Legend.IsHStack = false;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
for (int i = 0; i < Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
graphPane.AddPieSlice(ScaleData[i], Colors[i], Color.White, 45f, 0, NameList[i]);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 如果系统出错,显示错误信息
/// </summary>
/// <param name="graphPane"></param>
/// <param name="message"></param>
private void DrawMessage(GraphPane graphPane, string message)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
TextObj text = new TextObj(message, 200, 200);
text.Text = message;
graphPane.GraphObjList.Add(text);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
#endregion
}
e> 用户控件制作完成。
4、对控件的使用。
a> 创建测试页面(DrawGrap.aspx)
b> 把用户控件DrawGrap.ascx 拖到默认的测试页面上(DrawGrap.aspx)
c> 后台代码如下:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
public
partial
class
DrawGrap : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//柱状图
DrawBar();
//饼图
//DrawPie();
//曲线图
//DrawLine();
}
private void DrawBar()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
DrawGrap1.Type = AnalyticsType.Bar;
DrawGrap1.Title = "用户访问柱状图";
DrawGrap1.XAxisTitle = "月份";
DrawGrap1.YAxisTitle = "用户访问数量";
Random rand = new Random();
for (int i = 0; i < 6; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
ZedGraph.PointPairList ppl = new ZedGraph.PointPairList();
for (int j = 0; j < 3; j++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
double x = rand.Next(10);
double y = rand.NextDouble() * 1000;
ppl.Add(x, y);
}
DrawGrap1.DataSource.Add(ppl);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
private void DrawPie()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
DrawGrap1.Type = AnalyticsType.Pie;
DrawGrap1.Title = "用户访问饼图";
Random rand = new Random();
for (int i = 0; i < 3; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
DrawGrap1.ScaleData.Add((i + 2) * rand.Next(100));
DrawGrap1.NameList.Add(i.ToString());
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
private void DrawLine()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
DrawGrap1.Type = AnalyticsType.Line;
DrawGrap1.Title = "用户访问曲线图";
DrawGrap1.XAxisTitle = "月份";
DrawGrap1.YAxisTitle = "用户访问数量";
Random rand = new Random();
for (int i = 0; i < 3; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
ZedGraph.PointPairList ppl = new ZedGraph.PointPairList();
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
for (double x = 0; x < 5; x += 1.0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
double y = rand.NextDouble() * 1000;
ppl.Add(x, y);
}
DrawGrap1.DataSource.Add(ppl);
DrawGrap1.NameList.Add(i.ToString());
}
}
}
d> 生成的柱状图如下:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/zlp321002/Bar.jpg)
e> 生成的曲线图如下:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/zlp321002/Line.jpg)
f> 生成的饼图如下:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/zlp321002/Pie.jpg)
5、补充说明
a> 成功部署该项目需要在虚拟网站建临时文件夹(ZedGraphImages),便于存放生成的临时文件。
b> 据说该控件支持3D图效果,具体我没测试。希望有兴趣的同学可以测试。
(这些图一般的项目应用就足够了。)