echarts 在.net 中和数据库交互
? 需求描述： 在FineUIMVC中加載圖形控件echarts 其官網中只有靜態的json語句的數據源，沒有關于取數據庫的資料，幾天下午百度了一些方法。坑太多了， 但是 只要方向沒錯， 總有成功的方法：
?1.起初從簡單的Webform 中處理開始（思路：從數據庫中取數據保留在datatable 中， 再把datatable 轉成json 格式的數據 ； ajax 怎樣和后臺交互：（通過一般處理程序.ashx 向js中異步傳所需的數據）
?2.先貼些代碼：
一下是.ashx 代碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;
namespace WebApplication1
{
/// <summary>
/// Test01 的摘要說明
/// </summary>
public class Test01 : IHttpHandler
{
/// <summary>
/// 您將需要在網站的 Web.config 文件中配置此處理程序
/// 并向 IIS 注冊它，然后才能使用它。有關詳細信息，
/// 請參見下面的鏈接: http://go.microsoft.com/?linkid=8101007
/// </summary>
#region IHttpHandler Members
SqlConnection con = new SqlConnection("Server=.;User Id=sa;Pwd=123456;DataBase=AppBoxMvc");
DataSet ds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter();
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
//Series seriesObj = new Series();
string result = "";
public void ProcessRequest(HttpContext context)
{
//獲取一同發送過來的參數
//string command = context.Request["cmd"];
context.Response.ContentType = "text/plain";
//用來傳回去的內容
//context.Response.Write("Hello World");
Get_Data01(context);
}
public void Get_Data01(HttpContext context)
{
string sql = @"SELECT Name, ParentID FROM dbo.Menus WHERE ParentID IS NOT null and ParentID <> 1";
ds = GetDataFromDatabase(sql);
lists = new List<object>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { Name = dr["Name"], ParentID = dr["ParentID"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}
public DataSet GetDataFromDatabase(string sql)
{
ds = new DataSet();
adapter = new SqlDataAdapter(sql, con);
adapter.Fill(ds);
return ds;
}
public bool IsReusable
{
// 如果無法為其他請求重用托管處理程序，則返回 false。
// 如果按請求保留某些狀態信息，則通常這將為 false。
get { return false; }
}
#endregion
}
}
以上代碼返回web調用的數據源。
前端代碼：
一，添加 js引用
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
--- jquery 庫
<script src="jquery-1.11.1.js"></script>
二，拼接動態字符串
var name = '[';
name += 'transresult[' + item + '].Name' + ', ';
name += ']';
三，取動態字符串的值
--eval 函數
eval(name);
四， 完整代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart1 = echarts.init(document.getElementById('main1'));
// 指定圖表的配置項和數據
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
title: {
text: '',
subtext: '',
},
legend: {
data: ['data'],
right: '5%'
},
grid: {
left: '5%',
right: '0%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'New',
type: 'bar',
data: [100],
markPoint: {
data: [
{ type: 'max', name: 'Max Value' },
{ type: 'min', name: 'Min Value' }
]
},
},
]
};
$.ajax({
type: "post",
async: false,
url: "Test01.ashx",
datatype: "json",
success: function (result) {
if (result) {
eval("var transresult=" + result);
var name = '[';
var parentId = '[';
for (var item in transresult)
{
if (item < transresult.length - 1) {
name += 'transresult[' + item + '].Name' + ', ';
parentId += 'transresult['+item+'].ParentID' + ', ';
}
else {
name += 'transresult[' + item + '].Name' ;
parentId += 'transresult[' + item + '].ParentID' ;
}
}
//}
name += ']';
parentId += ']';
option1.xAxis[0].data = eval(name);
option1.series[0].data = eval(parentId);
alert(name);
alert(option1.series[0].data);
myChart1.setOption(option1);
}
},
error: function (errorMsg) {
alert(errorMsg);
}
});
// 使用剛指定的配置項和數據顯示圖表。
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
FINEUIMVC 中的測試。
是否可以使用一般窗體：（可以，但需要修改Web.config 中添加以下內容）
<pages
validateRequest="false"
pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, System.Web.Mvc, Version=2.0.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"
pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=2.0.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
</namespaces>
</pages>
然后按正常的控制器視圖模式就可以生成類型webform的程序
如果是正常的.cshtml 文件如果能在JS 代碼里處理一般處理過程，則其加載數據的方式 和 webform無異。
在測試環境中是成功的！
?
轉載于:https://www.cnblogs.com/hzf08/p/7475034.html
總結
以上是生活随笔為你收集整理的echarts 在.net 中和数据库交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《中国人工智能学会通讯》——10.22
- 下一篇： mysql 5.7报1055错误的解决方