ASP.NET+d3.js實現Sqlserver資料庫的可視化展示

来源:https://www.cnblogs.com/feiquan/archive/2019/05/10/10842993.html
-Advertisement-
Play Games

效果： 資料庫端： 前端展示： 實現原理： 1.在數據段建立兩個存儲過程 queryUserAnsawer（id） 根據用戶ID返回每一題的得分，主要是bcp exe時不能直接在sqlserver中執行sql查詢語句，只能先調用存儲過程 exportUserAnsawer（id，filepath,r ...


效果：

資料庫端：

 

前端展示：

實現原理：

1.在數據段建立兩個存儲過程

　　queryUserAnsawer（id） 根據用戶ID返回每一題的得分，主要是bcp exe時不能直接在sqlserver中執行sql查詢語句，只能先調用存儲過程

　　exportUserAnsawer（id，filepath,re）根據指定的ID調用queryUserAnsawer，根據物理路徑導出csv文件，re用來判斷導出是否成功

2.使用aps.net的cs文件生成filepath，然後調用exportUserAnsawer導出文件

3.使用d3.js獲取導出的csv文件，然後可視化顯示。可查看我之前的文章：

使用d3.v5實現條形圖

使用d3.v5實現餅狀圖

使用d3.v5實現折線圖與面積圖

源碼及分析：

1.sql存儲過程的建立（導出user的總分到CSV文件.sql）

Use 你的資料庫名
go
--創建存儲過程，根據userID返回每一題的分值

if exists (SELECT * FROM sysobjects    WHERE name='queryUserAnsawer')
    drop proc exportQueryUserAnsawer
go
 create   proc   queryUserAnsawer
 @id int    
  as 
    --這裡可以自定義sql語句
  select 題庫.題編號 題編號, (選項一分值*A+選項二分值*B+選項三分值*C+選項四分值*D) 總分 from  dbo.會員答案,題庫 WHERE  會員編號=@id and 會員答案.題編號=題庫.題編號
go  


--調用存儲過程exportQueryUserAnsawer
 exec 你的資料庫名..queryUserAnsawer 1
 
 
 
-- 創建函數，根據userID返回每一題的總分，並將其保存到自定義CSV的文件中
if exists (SELECT * FROM sysobjects    WHERE name='exportUserAnsawer')
    drop proc exportUserAnsawer
go
 

create   proc   exportUserAnsawer
(
    @id int  ,@filepath varchar(8000),--輸入參數
    @re int output --輸出參數
)
  as   
    declare   @s   varchar(8000)
    --csv文件的表頭,你也可以自定義表頭，但是為了與前端d3.js訪問，直接就data1,data2了set @s='echo data1,data2>"'+@filepath+'"' 
    exec   master..xp_cmdshell  @s,no_output 
    --導出csv文件到temp目錄
    set   @s='bcp   "exec 資料庫名..queryUserAnsawer '+cast(@id as varchar(50))+'" queryout "'+'"%temp%\temp.csv"'+'"   /c /t,  /U"登錄名"   -P"密碼" /S 伺服器名'     
    exec   master..xp_cmdshell   @s ,no_output 
    --將temp目錄下的csv文件與之前的csv文件的表頭合併
    set @s='more %temp%\temp.csv >>"'+@filepath+'"'
    exec   master..xp_cmdshell   @s ,no_output 
    --刪除temp目錄下的csv文件
    exec   master..xp_cmdshell   'del %temp%\temp.csv' ,no_output 
    --返回執行結果
    set @re=1 --如果可以執行這一句代表之前的語句沒有報錯
go

--調用存儲過程exportUserAnsawer
 --F:\Data\data.csv
declare @w int
exec 資料庫名..exportUserAnsawer 5, 'F:\Data\data.csv' ,@w output
--PRINT '執行結果：'+CONVERT(varchar(20),@w)
select @w as '返回值'

2.在網站目錄下的app_code創建一個用於導出文件的類（DB.cs）

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

/// <summary>
/// DB 的摘要說明
/// </summary>
public class DB
{
    public SqlConnection Con = new SqlConnection();
    public SqlCommand Com = new SqlCommand();
    public SqlDataAdapter Da = new SqlDataAdapter();
    public DataSet Ds = new DataSet();

    public DB()
    {
        //
        // TODO: 在此處添加構造函數邏輯
        //        
    }
    //定義一個用於返回資料庫連接字元串的方法
    public String GetConnectionString()
    {
        String ConStr;
        //  ConStr = System.Configuration.ConfigurationManager.AppSettings.Get("con").ToString();

       //  ConStr = System.Configuration.ConfigurationManager.ConnectionStrings["textconnectionstring"].ToString();
       ConStr = System.Configuration.ConfigurationManager.ConnectionStrings["連接名"].ToString();
        return ConStr;
    }

    //根據userID返回每一題的總分，並將其保存到自定義CSV的文件中
    //調用存儲過程exportUserAnsawer
    public bool exportQueryUserAnsawer(int id, String filepath) {
        int re = 0;

        try
        {
            Con.ConnectionString = GetConnectionString();
            //打開連接
            Con.Open();
            //調用存儲過程
            Com = new SqlCommand("exportUserAnsawer", Con);
            //設置命令的類型為存儲過程 
            Com.CommandType = CommandType.StoredProcedure;
            // 設置參數 
            Com.Parameters.Add("@id", SqlDbType.Int);
            Com.Parameters.Add("@filepath", SqlDbType.VarChar);
            // 註意輸出參數要設置大小,否則size預設為0
            Com.Parameters.Add("@re", SqlDbType.Int, 10);
            // 設置參數的類型為輸出參數,預設情況下是輸入, 
            Com.Parameters["@re"].Direction = ParameterDirection.Output;
            // 為參數賦值
            Com.Parameters["@id"].Value = id;
            Com.Parameters["@filepath"].Value = filepath;
            // 執行 
            Com.ExecuteNonQuery();
            // 得到輸出參數的值,把賦值給re,註意,這裡得到的是object類型的,要進行相應的類型轉換
            re = (int)Com.Parameters["@re"].Value;
            if (re == 1) return true;
            else return false;
        }
        catch (Exception e){
           // Console.WriteLine(e.ToString());
            return false;
        }

    }

}

3.在後端(測試結果.cs)文件中，創建文件名，路徑，用戶ID。這些變數可以從其他頁面的Session中獲取，我這裡就寫死了（方便演示）。

測試結果.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    String filepath=null;
    String userID = null;
    String username = null;
    protected void Page_Load(object sender, EventArgs e)
    {
        userID = ""+5;
        username = "clientuser1";

        //插入數據完成後導出csv文件
        filepath = getFilePath(username, userID);
        DB db2 = new DB();
        if (db2.exportQueryUserAnsawer(Convert.ToInt16(userID), filepath))
        {
            Response.Write("<script>alert('保存文件成功');</script>");
        }
        else
        {
            Response.Write("<script>alert('⚠保存文件失敗');</script>");

        }
        //轉相對路徑
        filepath = urlconvertor(filepath);

        //以上變數可從session中獲取
        //try
        //{
        //    username = Session["ClientUsername"].ToString();
        //    userID = Session["ClientUserID"].ToString();
        //    filepath = Session["FliePath"].ToString();
        //    filepath = urlconvertor(filepath);
        //   // Response.Write(filepath + "<br/>");
        //}
        //catch
        //{
        //    Response.Write("<script>alert('請先登錄！');;window.location.href='登錄.aspx';</script>");
        //    return;
        //}

        //設置以下屬性是為了，實現與js數據交互
        this.name.Text = username;
        this.name.ToolTip = username;
        this.path.ToolTip = filepath;
    }

    //退出登錄
    protected void Button1_Click(object sender, EventArgs e)
    {
        Session.Clear();
        Response.Redirect("登錄.aspx");
    }

     //生成文件物理路徑 如下
    //F:\Demo\Data\username_5_answer_2019-05-08_18-29-48-792.csv

    protected String getFilePath(String username,String userID ) {
        String year = DateTime.Now.Year.ToString();
        String mouth = DateTime.Now.Month.ToString();
        String day = DateTime.Now.Day.ToString();
        String houre = DateTime.Now.Hour.ToString();
        String minute = DateTime.Now.Minute.ToString();
        String second = DateTime.Now.Second.ToString();
        String millsecond = DateTime.Now.Millisecond.ToString();
        if (Convert.ToInt16(mouth) < 10) mouth = "0" + mouth;
        if (Convert.ToInt16(day) < 10) day = "0" + day;
        String date = year + "-" + mouth + "-" + day + "_" + houre + "-" + minute + "-" + second + "-" + millsecond;
        //Response.Write(date);

        //插入完成後導出csv文件
        filepath = "\\Data\\" + username + "_" + userID + "_answer_" + date + ".csv";
        filepath = urlconvertorlocal(filepath);
        return filepath;
    }

    //轉絕對路徑
    private string urlconvertorlocal(string url)
    {
        string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//獲取程式根目錄
        string reurl = tmpRootDir + url.Replace(@"/", @"/"); //轉換成絕對路徑
        return reurl;
    }
    //本地路徑轉換成URL相對路徑
    private string urlconvertor(string url)
    {
        string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString())+"\\";//獲取程式根目錄
        string reurl = url.Replace(tmpRootDir, ""); //轉換成相對路徑
        reurl = reurl.Replace("\\", "/");
        return reurl;
    }
    
}

4.前端代碼

測試結果.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="測試結果.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>測試結果</title>
    <style type="text/css">
        .hidden
        {
            display:none
            }
        .choice
        {
            display:block
            }
    </style>
    
    <script type="text/javascript" src="js/d3.min.js"></script>
</head>
<body>
    
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="name" runat="server" Text="username"></asp:Label>
        <%--為了c#與js交互--%>
        <asp:Label ID="path" runat="server" Text="path" class="hidden" ></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="退出登錄" onclick="Button1_Click" />

        <%--使用頁面回發響應慢,使用JS控制--%>
        <div id="radio">
            <asp:RadioButton ID="RadioButton1" runat="server" Text="條形圖" GroupName="g1" 
            Checked="true" 
                />
            <asp:RadioButton ID="RadioButton2" runat="server" Text="面積圖" GroupName="g1" 
                />
            <asp:RadioButton ID="RadioButton3" runat="server" Text="柱狀圖" GroupName="g1" 
                
                />
            <asp:RadioButton ID="RadioButton4" runat="server" Text="餅狀圖" GroupName="g1" 
                />
        </div>

        <asp:Panel ID="Pane_LineChart" runat="server" class="choice">
            <link href="css/linechart.css" type="text/css" media="screen" rel="Stylesheet" />
            <div id="linechart_container">
                <div id="linechart">
            
                </div>
            </div>
            <script type="text/javascript" src="js/linechart.js"></script>
        </asp:Panel>

        <asp:Panel ID="Panel_AreaChart" runat="server" class="hidden">
            <link href="css/areachart.css" type="text/css" media="screen" rel="Stylesheet" />
            <div id="areachart_container">
                <div id="areachart">
            
                </div>
            </div>
            <script type="text/javascript" src="js/areachart.js"></script>
        </asp:Panel>

        <asp:Panel ID="Panel_BarChart" runat="server" class="hidden">
            <link href="css/barchart.css" type="text/css" media="screen" rel="Stylesheet" />
            <div id="barchart">
            
            </div>
            <script type="text/javascript" src="js/barchart.js"></script>
        </asp:Panel>

        <asp:Panel ID="Panel_PieChart" runat="server" class="hidden">
             <link href="css/piechart.css" type="text/css" media="screen" rel="Stylesheet" />
            <div id="piechart">
            
            </div>
            <script type="text/javascript" src="js/piechart.js"></script>
        </asp:Panel>

        
    </div>
    </form>

    <script type="text/javascript" src="js/radioButton.js"></script>
</body>
</html>
測試結果.aspx

 

我上面只寫了關鍵代碼，如果你想查看整個demo，請在這裡下載

GitHub:ASP.NET+d3.js實現Sqlserver資料庫的可視化展示

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Split命令
    Split是string中非常有趣的命令，它是用來分隔字元串中子字元串的字元數組，並且不包含分隔符的空數組或null,如下麵的代碼： String value = "This is a short string."; Char delimiter = ' '; String[] substrings ...
  • 延時執行函數:前浪死在沙灘上
    業務場景：有主表、子表兩個GridView點擊主表的行，會自動讀取主表對應的子表數據但是如果反覆點擊會導致反覆讀取，其實反覆點擊的時候只需要最後一次執行查詢，前面的幾次點擊都是無意義操作根據這一需求設計了一個函數：private static List Tup = new List();/// //... ...
  • C#NPOI對Excel的操作、導入導出時異常處理、最全的NPOI資料在這裡~
    一、Excel理論知識 最新版NPOI2.4.1鏈接：https://pan.baidu.com/s/1iTgJi2hGsRQHyw2S_4dIUw 提取碼：adnq • 整個Excel表格叫做工作簿：WorkBook • 工作簿由以下幾部分組成 a.頁(Sheet); b.行(Row); c.單元 ...
  • 我的第一個netcore2.2 api項目搭建（三）續
    上一章快速陳述了自定義驗證功能添加的過程，我的第一個netcore2.2 api項目搭建（三） 但是並沒有真正的去實現，這一章將要實現驗證功能的添加。 這一章實現目標三：jwt認證授權添加 在netcore2.2中，只要添加很簡單的配置就能添加jwt功能了。至於jwt本身是啥大家自行去瞭解，這裡不做 ...
  • 新增篩選方案
    用戶可以創建屬於自己的篩選方案用戶可以創建不同的篩選方案適用於不同場景需求●設計篩選條件●欄位排序方式●欄位是否顯示●欄位顯示順序●欄位顯示寬度菜單打開，如果有預設的篩選條件直接篩選不彈出篩選框修複第一次打開篩選彈窗條件的值沒有數據類型的問題直接拖拽列位置，調整列寬度可以自動保存到預設方案中系統預設... ...
  • 一步步完成“迷你版” 的ASP.NET Core框架
    一 前言 Artech 分享了 "200行代碼，7個對象——讓你瞭解ASP.NET Core框架的本質" 。 用一個極簡的模擬框架闡述了ASP.NET Core框架最為核心的部分。 這裡一步步來完成這個迷你框架。 二 先來一段簡單的代碼 這段代碼非常簡單，啟動伺服器並監聽本地5000埠和處理請求。 ...
  • 【C#夯實】我與介面二三事：IEnumerable、IQueryable 與 LINQ
    序 學生時期，有過小組作業，當時分工一人做那麼兩三個頁面，然而在前端差不多的時候，我和另一個同學發生了爭執。當時用的是簡單的三層架構（DLL、BLL、UI），我個人覺得各寫各的吧，到時候合併，而他覺得應該把底層先寫好，他好直接調用中間層的方法。 到出來工作之後，接觸介面，想整理一下這個：介面到底是個 ...
  • .net 中訪問config的一些方式
    人所缺乏的不是才幹而是志向，不是成功的能力而是勤勞的意志。 哎！好久沒有寫博客了，今天就分享一些比較常用的對config文件的訪問一些方式。 首先 引用 using System.Configuration; 1、訪問config文件ConnectionStrings中的內容。 2、訪問config ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類