在网页上实现实时动态曲线——利用Highcharts控件和JQuery

nuaazdh

于 2011-09-06 22:00:36 发布

51811

分类专栏： C# SQL数据库开发文章标签： function javascript string 数据库存储

本文链接：https://blog.csdn.net/nuaazdh/article/details/6754928

版权

C# SQL数据库开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web上实现动态曲线

——实时地从数据库中获取数据，并在网页上实现无刷新显示。

本文利用JavaScript实现，每隔3秒，从数据库中获取一个数据，并在网页上动态显示。并且当用鼠标靠近曲线的点时，能够显示改点的相应的信息（横坐标和纵坐标值）。效果图（网页截图）如下图：

实现工具：Highcharts（www.highcharts.com/）和JQuery（http://jquery.com/）。其中主要参考了Highcharts的一个动态曲线的实例：http://www.highcharts.com/demo/dynamic-update。

下面详细介绍开发过程。

开发工具：VisualStudio 2008

开发语言：C#和JavaScript（脚本语言）

系统环境：Windows7

数据表：数据表分为两列，第一列“time”，第二类“value”，在数据库中写一个名为Get_Value的存储过程，输入参数starttime,endtime，返回字段“time”值位于这两者之间的time和对应的value值。

具体步骤：

① 打开VS2008，新建网站HighchartsDemo，开始页面（默认）为Default.aspx；

② 下载highcharts.js和juery.min.js（在Google中搜索jquery-1.3.2.min.js ，并将文件名改为juery.min.js，当然也可以不改），将文件加入项目中，并新建文件夹JS，将这两个文件放入JS文件夹中；

③ 在类_Default中添加静态变量：

static DateTime currenttime= Convert.ToDateTime("2009/07/13 0:20:00");

④ 在Default.aspx.cs文件中加入一下函数：（注意要包含相应的应用）

//得到数据库中的数据，并在Highcharts控件中显示
[WebMethod]
    public static string getDataTableByAjax()
    {
        //连接字符串
        string sqlConnStr = "DataSource=NUAA-PC\\SQLEXPRESS;Initial Catalog=TempData;IntegratedSecurity=True";
        //数据集和数据适配器
        DataSetds = new DataSet("GetValue");
        SqlDataAdapterda = new SqlDataAdapter();
        using (SqlConnection sqlConn= new SqlConnection(sqlConnStr))
        {
            try
            {
                sqlConn.Open();
                //存储过程,”Get_Value”为存储过程名
                SqlCommandsqlComm = newSqlCommand("Get_Value",sqlConn);
                sqlComm.CommandType = CommandType.StoredProcedure;
                //添加查询参数和值
                sqlComm.Parameters.Add("@starttime", SqlDbType.DateTime).Value= currenttime;
                sqlComm.Parameters.Add("@endtime", SqlDbType.DateTime).Value= currenttime.AddMinutes(2);
                //执行存储过程
                sqlComm.ExecuteNonQuery();
                da.SelectCommand = sqlComm;
                da.Fill(ds);
                //创建存储返回值的表
                DataTabledt = new DataTable();
                //为表增加两个列，列名分别为x和y
                dt.Columns.Add("x", typeof(string));
                dt.Columns.Add("y", typeof(float));
				//将存储过程中的表复制到返回表中
                foreach(DataRow drin ds.Tables[0].Rows)
                {
                    DataRownewdr = dt.NewRow();
                    newdr["x"] = dr[0].ToString();
                    newdr["y"] = dr[1];
                    dt.Rows.Add(newdr);
                }
                 //更新currenttime，下次再访问该函数时，便得到不同的值，实现“实时”的要求
                currenttime= currenttime.AddMinutes(2);           
                stringresult = Dtb2Json(dt).ToString();
                returnresult.ToString();
            }
            catch
            {
                throw new Exception("调用Ajax Error");
            }
            finally
            {
               sqlConn.Dispose();
            }
        }
    }

    #region DataTablel Json
    public static string Dtb2Json(DataTabledtb)
    {
        JavaScriptSerializerjss = new JavaScriptSerializer();
        ArrayListdic = new ArrayList();
        foreach (DataRow row in dtb.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string,object>();
            foreach(DataColumn colin dtb.Columns)
            {
                drow.Add(col.ColumnName, row[col.ColumnName]);
            }
            dic.Add(drow);
        }
        return jss.Serialize(dic);
    }
	#endregion

⑤ 在Default.aspx中适当地方加入以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
		<title>故障监测主页</title>
		<!—注意文件名应该和你下载的文件名保持一致 -->
		<script type="text/javascript"src="JS/jquery.min.js"></script>
		<script type="text/javascript"src="JS/highcharts.js"></script>
		<script type="text/javascript">
   		//<![CDATA[  
            $(function(){ 
                Highcharts.setOptions({
                     global: {
                        useUTC: false
                             }
                });
                //声明报表对象 
                var chart = new Highcharts.Chart({ 
                    chart:{ 
                    //将报表对象渲染到层上 
                    renderTo:'container' ,
                    defaultSeriesType:'spline'
                }, //chart end
                title:{
                   text:'实时PCA曲线'       
                },
                yAxis:{
                    title:{
                       text:'PCA值'           
                    }
                },
                //设定报表对象的初始数据 
                series:[{ 
                   data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                         0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                         0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                         0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
                }]
            });  //Highcharts.Chart end       
        
                //获取后台数据
                functiongetForm(){
                    $.ajax({
                         type:"Post",
                         //后台获取数据的函数，注意当对该页面重命名时，
                          //必须手动更改该选项
                           url: "Default.aspx/getDataTableByAjax",
                           contentType:"application/json; charset=utf-8",
                           dataType:"json",
                           //成功获取数据
                           success:function (data){
                           data= jQuery.parseJSON(data.d); //JSON再次转换为Table 形式；
                           varseries= chart.series[0];
                          series.addPoint([data[0]["x"],data[0]["y"]],false,true);
                           chart.redraw();
                           },
                           //显示错误                                       
                           error:function (err){
                            alert(err + "调用后台程序出现错误，请尝试刷新！");
                        }
                     });
                }   
        
               $(document).ready(function() { 
                   //每隔3秒自动调用方法，实现图表的实时更新 
                   window.setInterval(getForm,2000);               
                });         
            }); 
            //]]>  
	</script>
</head>
<body>
      <div id="container" style="width: 800px; height: 600px; margin: 0 auto"></div>           
</body>
</html>

⑥ 在浏览器中查看Default.aspx页，或者运行项目即可得到实时的动态曲线。

nuaazdh

关注

3
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
17
评论
在网页上实现实时动态曲线——利用Highcharts控件和JQuery

Web上实现动态曲线——实时地从数据库中获取数据，并在网页上实现无刷新显示。本文利用JavaScript实现，每隔3秒，从数据库中获取一个数据，并在网页上动态显示。并且当用鼠标靠近曲线的点时，能够显示改点的相应的信息（横坐标和纵坐标值）。效果图（网页截图）如下图：实现工具：Highcharts（www.highcharts.com/）和JQuery（http://jq
复制链接

扫一扫