设为首页 加入收藏

TOP

ASP.NET+d3.js实现Sqlserver数据库的可视化展示(一)
2019-09-17 18:23:53 】 浏览:56
Tags:ASP.NET d3.js 实现 Sqlserver 数据库 可视化 展示

效果:

数据库端:

 

前端展示:

实现原理:

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();
            /
首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇在 ASP.NET Core 项目中使用 npm .. 下一篇【C#夯实】我与接口二三事:IEnum..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目