62,243
社区成员
发帖
与我相关
我的任务
分享急求！b/s结构动态实时曲线图源码。
刚接到领导安排的任务，需要实现实时动态曲线效果图，y轴是重量值（范围固定），x轴是时间轴（15分钟的范围），要求每4秒钟从数据库中读取一次重量值，实现实时动态曲线的效果，时间轴不断向前更新，像股票效果图那样无刷新闪动的效果，最后曲线图由b/s结构发布，以前从没做过类似的项目，领导催着要，在网上也查了些资料，还是没能做出来，不知道有哪位大侠能帮忙实现，可以联系我0411-62619358葛(女)。
...全文
请发表友善的回复…
发表回复
M44346460 2013-01-19
- 打赏
- 举报
highChart有自带的例子。直接参考修改就成了！
CUIT_IGIS 2013-01-18
- 打赏
- 举报
妹子伤不起啊，用flex是很好实现的，因为flex中有图表控件，你动态给图表控件绑定数据源，那么曲线就是动态的了
无爱大叔 2012-11-20
- 打赏
- 举报
把<mce:script替换为<script
其他的楼上诸位说很全了，女，太重要了
by_封爱 2012-11-20
- 打赏
- 举报
我没吃饭 给你做完了 加我QQ 446294446 实时更新的图形控件自定义刷新时间
我先吃饭了 一会看到的话 加我QQ 如果别人需要 也请加我 免费送源码
dlxiner 2012-11-20
- 打赏
- 举报
非常感谢各位大使们帮忙，正在努力研究中......
webdiyer 2012-11-20
- 打赏
- 举报
可以用jQuery plugin，相比我十年前做图表费的那个劲，现在真是太方便了，看这个：
http://www.flotcharts.org/
这个是完全免费开源的
by_封爱 2012-11-20
- 打赏
- 举报
给你一些代码参考吧
using System;
using System.Web;
/// <summary>
/// Summary description for AsnyHandler
/// </summary>
public class AsnyHandler : IHttpAsyncHandler
{
public AsnyHandler()
{
}
public IAsyncResult BeginProcessRequest(HttpContext context, AsyncCallback cb, object extraData)
{
//myAsynResult为实现了IAsyncResult接口的类，当不调用cb的回调函数时，该请求不会返回到给客户端，会一直处于连接状态
myAsynResult asyncResult = new myAsynResult(context, cb, extraData);
String content = context.Request.Params["content"];
System.Threading.Thread.Sleep(5000);
System.Data.SqlClient.SqlParameter[] p = new System.Data.SqlClient.SqlParameter[1];
p[0] = new System.Data.SqlClient.SqlParameter("@sid", System.Data.SqlDbType.VarChar, 2000);
p[0].Value = "";
System.Data.DataSet ds= dosoft.DAL.DbHelperSQL.RunProc("pr_UnitState", p);
string json=Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[0]);
//向Message类中添加该消息
Messages.Instance().AddMessage(json, asyncResult);
return asyncResult;
}
#region 不必理会
public void EndProcessRequest(IAsyncResult result)
{
}
public bool IsReusable
{
get { return false; ; }
}
public void ProcessRequest(HttpContext context)
{
}
#endregion
}
public class myAsynResult : IAsyncResult
{
bool _IsCompleted = false;
private HttpContext context;
private AsyncCallback cb;
private object extraData;
public myAsynResult(HttpContext context, AsyncCallback cb, object extraData)
{
this.context = context;
this.cb = cb;
this.extraData = extraData;
}
private string _content;
public string Content
{
get { return _content; }
set { _content = value; }
}
#region IAsyncResult接口
public object AsyncState
{
get { return null; }
}
public System.Threading.WaitHandle AsyncWaitHandle
{
get { return null; }
}
public bool CompletedSynchronously
{
get { return false; }
}
public bool IsCompleted
{
get { return _IsCompleted; }
}
#endregion
//在Message类中的添加消息方法中，调用该方法，将消息输入到客户端，从而实现广播的功能
public void Send(object data)
{
string s = this.Content;
//context.Response.Write(this.Content);
context.Response.Write(s);
if (cb != null)
{
cb(this);
}
_IsCompleted = true; ;
}
}
using System;
using System.Collections.Generic;
using System.Web;
/// <summary>
/// Summary description for Messages
/// </summary>
public class Messages
{
//记录所有请求的客户端
List<myAsynResult> clients = new List<myAsynResult>();
#region 实现该类的单例
private static readonly Messages _Instance = new Messages();
private Messages()
{
}
public static Messages Instance()
{
return _Instance;
}
#endregion
public void AddMessage(string content, myAsynResult asyncResult)
{
//当传入的内容为"-1"时，表示为建立连接请求，即为了维持一个从客户端到服务器的连接而建立的连接
//此时将该连接保存到 List<myAsynResult> clients中，待再有消息发送过来时，该连接将会被遍历，并且会将该连接输出内容后，结束该连接
if (content == "-1")
{
clients.Add(asyncResult);
}
else
{
//将当前请求的内容输出到客户端
asyncResult.Content = content;
asyncResult.Send(null);
//否则将遍历所有已缓存的client,并将当前内容输出到客户端
foreach (myAsynResult result in clients)
{
result.Content = content;
result.Send(null);
}
//清空所有缓存
clients.Clear();
}
}
}
<httpHandlers>
<add path="comet_broadcast.do" type="AsnyHandler" verb="POST,GET"/>
</httpHandlers>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//加载时间
wait();
function wait()
{
$.post("comet_broadcast.do", { content: "-1" },
function (data, status)
{
data=eval(data);
for (var i=0;i<data.length;i++)
{
//以下是我的代码 你可以直接修改 然后绑定到chart上 就OK了
var id=data[i].生产单元编码;
var name=data[i].生产单元;
var state=data[i].状态;
var rid=data[i].任务号;
var jid=data[i].机床号;
var units=data[i].订货单位;
var top_id=data[i].上级生产单元编码;
var top_name=data[i].上级生产单元;
if(state=="使用")
{
$("#A"+id).css("background-color","red");
$("#A"+id).html(jid+"<br>"+units);
}
else
{
$("#A"+id).css("background-color","green");
}
}
wait();
}, "html"
);
}
});
</script>
by_封爱 2012-11-20
- 打赏
- 举报
这个问题的所在么 有2点 第一个 是图形控件 第二个 是实时的
至于第一点 我就不说了 amchart mschart jschart googlechart jqchart 很多都可以实现
而且一般都是js数组对象
至于第二个 实时 我建议采用推送来做 而且 几秒也可控制
最终 就是3秒查询数据库 返回一个json对象
在客户端接收 拆分 然后 赋值 绑定 应该不是很难 都是js的 至于推么 你可以百度下
dlxiner 2012-11-20
- 打赏
- 举报
taomanman谢谢你的实例，可我弄了后报错。如下图
暖枫无敌 2012-11-20
- 打赏
- 举报
后台数据前台调用很简单，参考：
http://blog.csdn.net/taomanman/article/details/6325942
dlxiner 2012-11-20
- 打赏
- 举报
在网上也找到了这个例子，试着做了一下，可前台调用不了数据库信息，曲线图总显示默认数据的曲线图，不知道是哪的问题？
dlxiner 2012-11-20
- 打赏
- 举报
各位大侠，曲线终于画出来了，不过好像是静态的，从数据库读取数据，x轴是时间，数据越多x轴的值越密，怎么样能只显示一段时间的曲线，不用显示那么密集的，也就是说假如我要实现的曲线y轴是重量值（范围固定），x轴是时间轴，显示当前15分钟的范围，设每5分钟为一个时间段，15分钟就有三段，那么假如当前x轴原点处时间以8:00:00开始，第一段时间到8:05:00结束，第二段时间8:10:00结束,第三段时间8:15:00结束，然后4秒后从数据库中读取一次重量值，各点时间就会变为：8:00:04、8:05:04、8:10:04、8:15:04，曲线变为原来8:00:00取的数据被顶掉，8:15:04取的数据曲线显示理来，就是曲线向前推动，新数据进来，旧数据被顶掉了，不知道我说的，各位大侠明不明白，可参考图
快乐的小二兔 2012-11-19
- 打赏
- 举报
女。。。。。。重点是这个。
好吧妹子！
我们也要做这个东西但是，用的是第三方（收费）
微软自带一个报表的软件可以做到这个功能。水晶报表你懂的
耗子哭死猫 2012-11-19
- 打赏
- 举报
我和你差不多，最后用的这个Visifire 是Silverlight一个控件，
暖枫无敌 2012-11-19
- 打赏
- 举报
HighCharts控件可以实现，参考demo：
http://blog.csdn.net/nuaazdh/article/details/6754928
色拉油 2012-11-19
- 打赏
- 举报
求代码。。。。。。。。。。。。。
xuan.ye 2012-11-19
- 打赏
- 举报
好同学，我都是跪着求工程师，憋了一个月，才能给点东西。
姐妹居然知道上网花钱买，好员工啊。
http://www.oksvn.com/Download/Detail-160.shtml 以前用owc11写的。
向楼上说的用水晶报表也能做；用微软的mschart也能做
dlxiner 2012-11-19
- 打赏
- 举报
flex?怎么画？
SeanDing1989 2012-11-19
- 打赏
- 举报
用flex自己画个图标呗.
你完全可以采用flashchart 的falsh图表 然后在一个页面内嵌个iframe然后刷新这个嵌入的页面。
嵌入的页面用jq异步访问你数据库。 $(function(){ ...})
dlxiner 2012-11-19
- 打赏
- 举报
我顶，可付报酬。
