.NET+Ajax+Echarts 实现动态数据可视化图表

接上篇：获取传感器数据并传入数据库-HTTP/POST/ASP.NET

数据可视化凭借其数据直观易查的优势被众多项目青睐，初入数据可视化的coder可能比较迷茫，毕竟前后端都要涉及，其主要分为

1. 浏览器向服务器(WebService)发送数据请求(POST)
2. 服务器接受请求并从数据库获取最新数据并回发浏览器
3. 浏览器拿到回发数据解析后交给图表插件渲染

一：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>