由于老大要求,要在ASP.NET下做当天传感器的实时变化曲线图,从网上找到了ZedGrap这个控件,展示效果还是不错的。以前看别人写的文章,刷刷的一下上来就是代码一大堆,而我首先想看到的是代码实现的效果,如果是我感兴趣的,我会接着往下看。所以,先上图,
图片的实现代码不多,主要是这个控件的一些属性的设置,一开始都不了解,又从晚上下了控件帮助文档,再一个个的试验
(虽然属性都是英文的,好在我有,有道词典,哦也!)
这个实现的设计思想是,Y轴显示的是空气温度的值,值的变化范围从零下60度到零上60,(哥们现在在东北,所以零下60度还是比较接近实际情况的)。X轴展示的是一天的时间点,从0点到23点。坐标系中的曲线变化是从O点开始到当前时间的空气温度变化情况。
实现的具体步骤,
第一步,下载ZedGrap,在项目中引入ZedGraph.dll,ZedGraph.Web.dll,Zegraph.dll这个几个dll文件,同时在项目根目录下加入ZedGrap文件夹中的ZedGraphImages这个文件夹和ZedGrap文件夹中的DrawGrap.ascx用户控件。
第二步,新建一个aspx页面文件,例如DrawGrap.aspx,在页面头部<%@ Register src="DrawGrap.ascx" tagname="DrawGrap" tagprefix="uc1" %>引入标识
在页面内加入<uc1:DrawGrap ID="dg" runat="server"/>
在后台写入画线方法
private void DrawLine()
{
dg.Type = 0;
dg.Title = "当天环境因素变化曲线";
dg.XAxisTitle = "时间点";
dg.YAxisTitle = "环境因素值(℃)";
Random rand = new Random();
for (int i = 0; i < 1; i++)
{
ZedGraph.PointPairList ppl = new ZedGraph.PointPairList();
double y = -60;
for (int x = 0; x < 24; x++)
{
if (x > DateTime.Now.Hour) break;
y = GetValue(DateTime.Parse("2012-08-12"), x, 1);
ppl.Add(x, y);
}
dg.DataSource.Add(ppl);
dg.NameList.Add("空气温度" + i.ToString());
}
}
下面要做的就是对控件的一些属性的设置,比如设置X轴,Y轴上的刻度、标题文字、折线的颜色等