ZedGraph图形控件在Web开发中的应用
2010-09-10 11:01
405 查看
ZedGraph介绍：
ZedGraph是一个功能强大图形控件，可以根据任意数据集创建2D曲线，bar，和pie图，同时我们既可以Windows Form中，也可以在ASP.NET Web Form中使用它。ZedGraph具有高度的灵活性，我们几乎可以定制图形的每个方面，同时又为所有的特性提供了默认值，因此可以快速上手。ZedGraph与.NET 2.0和Visual Studio 2005兼容。
ZedGraph在web中的应用：
zedgraph是一个开源免费项目，其官方网http://zedgraph.org/wiki/index.php?title=Main_Page
zedgraph中有两个命名空间--------ZedGraph和ZedGraph.Web。
ZedGraph 命名空间包含整个ZedGraph的类，加上一个ZedGraphControl控件（用于WinForm开发用的UI控件)。
ZedGraph.Web命名空间包含用于web开发的组件，加上一个ZedGraphWeb控件（用于web开发的UI控件）。
当只开发WinForm程序时，可以只添加引用ZedGraph命名空间对应的ZedGraph.dll。并可以在工具箱中，用 “选择项”把ZedGraphControl控件当成工具添加到工具箱中，这时就可以像其他（如button）一样，直接从工具箱中拖拉出来。
当开发web程序时，就要添加引用ZedGraph.dll和ZedGraph.Web.dll。并也可在工具箱中，把ZedGraphWeb控件添加到工具箱。
现在讲关于zedgraph 在web中的应用：
ZedGraphWeb.RenderMode有两种模式：ImageTag和RawImage。
ImageTag：这是用的比较多的。此时，把zedgraph作为一个正常控件使用。它的每一次请求，都会先生成图片，缓存在服务器上的一个指定文件夹下（这些图片，在客户端关闭浏览器，缓存时间到时，自动删除），接着自动产生一个<img srl="">标签，放在原来ZedGraphWeb在网页中的位置。img的src指向缓存在指定文件夹下的图片的地址，并加上time属性，以骗取浏览器重新加载图片。默认情况下，我们需要在应用程序的根目录下，指定一个ZedGraphImages的文件夹来存放缓存图片，大家也可修改ZedGraphWeb的
Height：300
Width： 400
RenderedImagePath： ~/ZedGraphImages/ （这个属性可以自己设置路径）
ChartFill.Color： Black
ChartFill.Type： Solid
TmpImageDuration: 0 (注意这里的单位是小时，如果不小心会在服务器端产生很多的垃圾文件)
这是利用Visual Studio属性面板对ZedGraph控件进行设置
在解决方案浏览器中右击项目，选择New Folder，命名为ZedGraphImages，ZedGraph使用此文件夹存放呈现到客户端的图片，必须添加这个文件夹。
绘制图形：
命名空间应用：
aspx.cs文件中
using ZedGraph.Web;
using System.Data.SqlClient;
aspx文件中
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" Theme=""%>
<%@ Register TagPrefix="zgw" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<ZGW:ZEDGRAPHWEB runat="server"
Width="900" Height="500" OnRenderGraph="OnRenderGraph" RenderedImagePath="~/image/" TmpImageDuration="0.01">
</ZGW:ZEDGRAPHWEB>
</form>
</body>
</html>
在aspx.cs文件里添加ZedGraph的事件代码OnRenderGraph：
protected void OnRenderGraph(ZedGraphWeb webObject, Graphics g, MasterPane masterPane)
{
GraphPane myPane = masterPane[0];
string[] labels = null;
myPane.Title.Text = "";//报表名称
myPane.XAxis.Title.Text = "";//横坐标的名称
myPane.YAxis.Title.Text = "";//纵坐标的名称
SqlConnection myConnection = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"]);
//获取数据库中的数据
SqlDataAdapter myDataAdapter = new SqlDataAdapter("select * from RealDate", myConnection);
DataSet myDs = new DataSet();
myDataAdapter.Fill(myDs, "RealDate");
int iCount = myDs.Tables["RealDate"].Rows.Count;
double[] y = new double[iCount];
string s = string.Empty;
for (int i = 0; i < iCount; i++)
{
DateTime sTime = Convert.ToDateTime(myDs.Tables["RealDate"].Rows[i][0].ToString());
s += sTime.ToString("hh:mm:ss") + ";";
y[i] = Convert.ToDouble(myDs.Tables["RealDate"].Rows[i][1].ToString());
}
labels = s.Split(';');
LineItem myCurve = myPane.AddCurve("监测值", null, y, Color.Red, SymbolType.Circle);
myCurve.Line.IsSmooth = true;
myPane.XAxis.Type = AxisType.Text;
myPane.XAxis.Scale.TextLabels = labels;
myPane.XAxis.Scale.FontSpec.Size = 7;
myCurve.Line.Width = 1.5F;
myCurve.Symbol.Fill = new Fill(Color.White);
myCurve.Symbol.Size = 5;
myPane.XAxis.Scale.BaseTic = 0;
myPane.Chart.Fill = new Fill(Color.White, Color.SteelBlue, 45.0F);
const double offset = 0.001;
for (int i = 0; i < iCount; i++)
{
PointPair pt = myCurve.Points[i];
TextObj text = new TextObj(pt.Y.ToString(), pt.X, pt.Y + offset, CoordType.AxisXYScale, AlignH.Left, AlignV.Center);
text.ZOrder = ZOrder.A_InFront;
text.FontSpec.Border.IsVisible = false;
text.FontSpec.Fill.IsVisible = false;
text.FontSpec.Fill = new Fill(Color.FromArgb(100, Color.White));
text.FontSpec.Angle = 90;
myPane.GraphObjList.Add(text);
}
myPane.YAxis.Scale.MaxGrace = 0.2;
masterPane.AxisChange(g);
}
效果图：
ZedGraph是一个功能强大图形控件，可以根据任意数据集创建2D曲线，bar，和pie图，同时我们既可以Windows Form中，也可以在ASP.NET Web Form中使用它。ZedGraph具有高度的灵活性，我们几乎可以定制图形的每个方面，同时又为所有的特性提供了默认值，因此可以快速上手。ZedGraph与.NET 2.0和Visual Studio 2005兼容。
ZedGraph在web中的应用：
zedgraph是一个开源免费项目，其官方网http://zedgraph.org/wiki/index.php?title=Main_Page
zedgraph中有两个命名空间--------ZedGraph和ZedGraph.Web。
ZedGraph 命名空间包含整个ZedGraph的类，加上一个ZedGraphControl控件（用于WinForm开发用的UI控件)。
ZedGraph.Web命名空间包含用于web开发的组件，加上一个ZedGraphWeb控件（用于web开发的UI控件）。
当只开发WinForm程序时，可以只添加引用ZedGraph命名空间对应的ZedGraph.dll。并可以在工具箱中，用 “选择项”把ZedGraphControl控件当成工具添加到工具箱中，这时就可以像其他（如button）一样，直接从工具箱中拖拉出来。
当开发web程序时，就要添加引用ZedGraph.dll和ZedGraph.Web.dll。并也可在工具箱中，把ZedGraphWeb控件添加到工具箱。
现在讲关于zedgraph 在web中的应用：
ZedGraphWeb.RenderMode有两种模式：ImageTag和RawImage。
ImageTag：这是用的比较多的。此时，把zedgraph作为一个正常控件使用。它的每一次请求，都会先生成图片，缓存在服务器上的一个指定文件夹下（这些图片，在客户端关闭浏览器，缓存时间到时，自动删除），接着自动产生一个<img srl="">标签，放在原来ZedGraphWeb在网页中的位置。img的src指向缓存在指定文件夹下的图片的地址，并加上time属性，以骗取浏览器重新加载图片。默认情况下，我们需要在应用程序的根目录下，指定一个ZedGraphImages的文件夹来存放缓存图片，大家也可修改ZedGraphWeb的
Height：300
Width： 400
RenderedImagePath： ~/ZedGraphImages/ （这个属性可以自己设置路径）
ChartFill.Color： Black
ChartFill.Type： Solid
TmpImageDuration: 0 (注意这里的单位是小时，如果不小心会在服务器端产生很多的垃圾文件)
这是利用Visual Studio属性面板对ZedGraph控件进行设置
在解决方案浏览器中右击项目，选择New Folder，命名为ZedGraphImages，ZedGraph使用此文件夹存放呈现到客户端的图片，必须添加这个文件夹。
绘制图形：
命名空间应用：
aspx.cs文件中
using ZedGraph.Web;
using System.Data.SqlClient;
aspx文件中
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" Theme=""%>
<%@ Register TagPrefix="zgw" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<ZGW:ZEDGRAPHWEB runat="server"
Width="900" Height="500" OnRenderGraph="OnRenderGraph" RenderedImagePath="~/image/" TmpImageDuration="0.01">
</ZGW:ZEDGRAPHWEB>
</form>
</body>
</html>
在aspx.cs文件里添加ZedGraph的事件代码OnRenderGraph：
protected void OnRenderGraph(ZedGraphWeb webObject, Graphics g, MasterPane masterPane)
{
GraphPane myPane = masterPane[0];
string[] labels = null;
myPane.Title.Text = "";//报表名称
myPane.XAxis.Title.Text = "";//横坐标的名称
myPane.YAxis.Title.Text = "";//纵坐标的名称
SqlConnection myConnection = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"]);
//获取数据库中的数据
SqlDataAdapter myDataAdapter = new SqlDataAdapter("select * from RealDate", myConnection);
DataSet myDs = new DataSet();
myDataAdapter.Fill(myDs, "RealDate");
int iCount = myDs.Tables["RealDate"].Rows.Count;
double[] y = new double[iCount];
string s = string.Empty;
for (int i = 0; i < iCount; i++)
{
DateTime sTime = Convert.ToDateTime(myDs.Tables["RealDate"].Rows[i][0].ToString());
s += sTime.ToString("hh:mm:ss") + ";";
y[i] = Convert.ToDouble(myDs.Tables["RealDate"].Rows[i][1].ToString());
}
labels = s.Split(';');
LineItem myCurve = myPane.AddCurve("监测值", null, y, Color.Red, SymbolType.Circle);
myCurve.Line.IsSmooth = true;
myPane.XAxis.Type = AxisType.Text;
myPane.XAxis.Scale.TextLabels = labels;
myPane.XAxis.Scale.FontSpec.Size = 7;
myCurve.Line.Width = 1.5F;
myCurve.Symbol.Fill = new Fill(Color.White);
myCurve.Symbol.Size = 5;
myPane.XAxis.Scale.BaseTic = 0;
myPane.Chart.Fill = new Fill(Color.White, Color.SteelBlue, 45.0F);
const double offset = 0.001;
for (int i = 0; i < iCount; i++)
{
PointPair pt = myCurve.Points[i];
TextObj text = new TextObj(pt.Y.ToString(), pt.X, pt.Y + offset, CoordType.AxisXYScale, AlignH.Left, AlignV.Center);
text.ZOrder = ZOrder.A_InFront;
text.FontSpec.Border.IsVisible = false;
text.FontSpec.Fill.IsVisible = false;
text.FontSpec.Fill = new Fill(Color.FromArgb(100, Color.White));
text.FontSpec.Angle = 90;
myPane.GraphObjList.Add(text);
}
myPane.YAxis.Scale.MaxGrace = 0.2;
masterPane.AxisChange(g);
}
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ZedGraph图形控件在Web开发中的应用
- ZedGraph图形控件在Web开发中的应用()
- ZedGraph图形控件在Web开发中的应用
- WEB下的客户端控件(OCX)的开发应用
- [转]在WEB下的客户端控件(OCX)的开发应用
- 在WEB下的客户端控件+Activex控件的开发应用
- [转]在WEB下的客户端控件的开发应用
- 使用Jasperreport作为报表控件开发Web 报表应用
- 在WEB下的客户端控件的开发应用
- win8应用商店程序开发-WebView控件
- [转]在WEB下的客户端控件的开发应用
- 使用Jasperreport作为报表控件开发Web 报表应用 后续
- 【WP开发】WebView控件应用要点
- 在WEB下的客户端控件的开发应用
- Android应用开发：图形绘制之硬件加速
- Portal-Basic Java Web 应用开发框架：应用篇（十三） —— REST Convention
- Portal-Basic Web 应用开发框架：应用篇（三） —— 国际化
- Web图形开发方案选型，SVG/VML/Flash/Applet优劣比较
- 玩转 Java Web 应用开发：Play 框架
- JAX-RS介绍——Java API forRESTful WebServices，JAX-RS的目标是Web Services开发（这与HTML Web应用不同）而Spring MVC的目标则是Web应用开发