//得到數據庫中的數據，並在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中適當地方加入以下代碼：
[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
<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>
得到數據庫中的數據，並在Highcharts控件中顯示
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章