数据可视化凭借其数据直观易查的优势被众多项目青睐,初入数据可视化的coder可能比较迷茫,毕竟前后端都要涉及,其主要分为
- 浏览器向服务器(WebService)发送数据请求(POST)
- 服务器接受请求并从数据库获取最新数据并回发浏览器
- 浏览器拿到回发数据解析后交给图表插件渲染
一:WebService实现
WebService再这里的作用是接受浏览器的Ajax请求并与数据库进行交互,然后将结果返回给浏览器
在上文中的WebService中添加GetData()
方法,用于回传图表数据
#region 获取一条最新数据
[WebMethod]
public string GetData()
{
string sql = "select top 1 * FROM tblSensorData ORDER BY ID DESC"; //此处ID主键自增
string strsql = ConfigurationManager.ConnectionStrings["sqlserverconfig"].ToString();//读取webconfig数据库连接字符串
con = new SqlConnection(strsql);
DataTable dt = new DataTable();
SqlDataAdapter da;
try
{
da = new SqlDataAdapter(sql, con);
da.Fill(dt);//数据填充
}
catch (Exception ex)
{
ex.ToString();
}
return DataTableToJson(dt);//结果表转JSON字符串
}
#endregion
其中的DataTable转JSON方法如下,其作用是将结果表格式化为JSON字符串,方便POST请求后解析。
public string DataTableToJson(DataTable dt) //DataTable转Json串方法
{
StringBuilder Json = new StringBuilder();
Json.Append("[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]");
return Json.ToString();
}
调试WebService,调用GetData()方法,获得序列化数据,目前后台工作已经完成。
<string xmlns="http://tempuri.org/">
[{"ID":"17263","DeviceID":"1","EvmtTemp":"19.90","EvmtHumi":"71.00","TRHumi":"62.85","PHData":"6.3","CO2Data":"0.04","isDelete":"0","AddTime":"2019/3/30 9:53:07"}]
</string>