当.net撞上bi可视化,这3种“套路”你要知道(代码片段)

葡萄城技术团队 葡萄城技术团队     2022-11-30     461

关键词:

最近葡萄在做技术支持,又遇到了客户给我们出的新问题。

事情是这样的。
这次客户使用的是.Net项目,直接做BI大屏过于复杂,所以想直接集成使用BI数据可视化分析大屏。

所以,这次我们就从——Wyn出发,为大家介绍如何在 .Net环境中集成BI仪表板数据可视化大屏。

说到这里有些同学对BI仪表板数据可视化大屏并没有概念,我们这里先为大家介绍一下。

BI仪表板数据可视化大屏

无论你现在正在进行什么项目,多少都会遇到甲方提出,需要一个炫酷好看的数据看板,进行数据可视化展示及自助式数据分析。

这个看板,就是BI仪表板数据可视化大屏。

这个看板有多重要呢?

企业对内信息共享、对外行业交流、会议现场展示你能想到的这些场合都适用,同时看板类需求已经常态化,对于甲方客户而言,项目需求的必备功能就是要必须支持"可视化大屏"。因此,BI 可视化仪表板设计会出现在我们现在及未来要做的每个信息项目中。

在这里我们简单根据大屏实现效果和功能进行分层:

第一层:简单可视化手段的堆叠,如使用Echarts.js 或其他图表库,将静态的数据以可视化的样式展示出来,形成一个静态的自适应的数据可视化"报表";

第二层:实现数据的实时更新,与真实的业务数据关联,将业务数据使用可视化图表进行实时展现,而非静态的数据;

第三层:实现数据的自助式分析,包含了数据建模、数据加工处理、可视化展示及自助式数据分析的操作,是真正意义上的商业智能数据分析。

因此要实现BI大屏,主要根据我们的实际需求决定整体的开发工作量。本次,我们就用Wyn Enterprise 作为实例,为大家演示如何在.Net Core项目中实现BI可视化的应用集成。最终可实现项目的屏幕自适应、多页面仪表板、自动数据刷新、3D动画特效等效果,这些效果可以直接应用到智慧园区、智能车间、健康医疗、电力能源、校园安全、数字指挥中心等场景。

.Net Core 项目中集成BI方式介绍

.Net Core 项目中集成BI主要有三种方式,下面通过具体例子为大家介绍这几种不同的集成方式。

Div 集成

Div集成多用于希望用以原生方式在业务系统中集成仪表板、报表、数据源以及数据集等。这种集成方式的核心是获取到文档的DIV元素和对应的值,然后将其写到自己的网页代码中。

注意

进行DIV集成之前,需要将Wyn系统进行跨域配置,允许跨域请求。例如:

示例代码

下面为集成的示例代码:

以下对应图中的编号,分别进行解释说明:

(1)具体部署系统的实际域名地址;

(2)系统中仪表板(Dashboard)插件的版本号;

(3)用户Token,请确保使用的Token 具有足够权限(如查看仪表板,如集成设计器则需创建仪表板权限)。

(4)仪表板的ID,用于集成单个仪表板文档。 如集成空的设计器,则不需要,删掉此行即可。

(5)引用代码,用于集成设计器。

(6)引用代码,用于集成单个仪表板文档。

URL集成

在.Net Core项目中使用最多的集成方式是URL集成,这种集成方式的核心是设置一个带参数(QueryString)的网址(URL),作为业务系统中某个菜单链接的目标地址,或者是作为业务系统页面中某个iframe元素的src属性值。

URL集成的核心是生成被集成报表或仪表板的完整URL。

以仪表板为例:

(1)在新窗口打开仪表板

选择仪表板,单击页面右上角的新窗口按钮,在新的浏览器窗口中打开仪表板。

(2)拷贝浏览器地址栏 URL

将仪表板的URL地址拷贝粘贴到记事本中待用。

(3)获取访问令牌

进入系统后台管理 >生成令牌。

输入令牌信息,单击" 生成令牌"按钮即可生成该用户名的令牌字串;单击右侧的获取令牌按钮即可将令牌复制。

在这里需要注意

生成令牌时使用的用户名,应具有待访问报表或仪表板的查看权限。

比如专门为项目创建一个名为guest的用户,再创建一个名为" 集成用户"的角色,并将guest用户加入该角色。然后设置待集成报表或仪表板的权限,允许" 集成用户"【只读】。

(4)将刚刚复制的令牌粘贴到第(3)步中URL的末尾,并使用 &token= 进行连接,得到的URL字串如下:

http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN &token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed

(5)使用带令牌的URL字串

将该URL字串设置为业务系统页面文件中某个iframe的src属性或者超链接的href属性。

例如:


\\<iframe src="[http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN](http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN)&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%;width:90%;border:none;background:grey;" /\\>

效果如下图:

如果你想在新的浏览器窗口中打开仪表板内容,只需设置一个超链接,href设置为上述的URL即可。

例如:

<iframe src="http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%;width:90%;border:none;background:grey;" />

API 集成

这种方式需要BI系统支持GraphQL API,这样几乎所有界面操作均可通过调用API完成,例如在门户页面中展开某个分类下的文档列表时,通过浏览器调试窗格就可以看到实际的GraphQL API调用。

操作方法

所有API调用详解,请参考:

https://wyn.grapecity.com.cn/WynApiDemo/

API调用示例,如下图:

与REST API不同,GraphQL API不需要为不同的对象操作提供不同的URL。不同对象的不同操作,都是通过一个统一的URL(http://localhost:51980/api/graphql)进行调用;不同的是提交的数据不一样。

提交数据的格式和内容,可通过浏览器调试功能,查看界面操作中的网络交互(Network),再查看具体的请求头信息(Headers)。

API返回的内容,可通过查看网络交互中的Response部分来获得。

在浏览器中打开 http://localhost:51980/graphiql 网页(注意URL末尾的graph与ql之间有一个字母i),可随时调试API,如下图:

接下来我们再来演示如何在ASP.NET Core MVC 项目中实现数据可视化功能。

ASP .Net Core MVC 项目集成BI数据可视化

安装Wyn后,使用 localhost:51980进入门户管理网站。

整个数据可视化中使用到的仪表板,及设计器,管理中心,数据加工处理模块都是在线的B/S端的,我们直接安装就可以。

打开 Visual Studio 新建ASP.NET MVC项目 或者已有的项目中添加新的视图或HTML文件

其他

在上面我们介绍了在ASP .Net Core MVC 项目和.Net Core 项目中的集成方式,但想要更好地解决实际项目中的问题,还需要一些更高级的集成功能。

![](https://img-blog.csdnimg.cn/img_convert/d399d0d5fb2dd3b4133d756bba2fcda6.png

集成中的权限管理

BI仪表板因为涉及到企业核心业务数据信息,因此用户权限是关键的功能,因此对于用户权限管理也需要有不同方案进行处理,我们以大家最熟悉的安全令牌来举例:

使用固定令牌集成时,相当于以一个固定的用户身份查看报表内容。

如果希望业务系统的不同用户,根据数据权限的不同,看到不同的报表内容,就需要以业务系统当前用户的身份登录,获取不同的令牌,再去查看文档内容。

将业务系统的当前登录用户传给BI系统时,并以该用户身份登录的过程,就是用户身份集成。

用户身份集成有两种方式:(1)使用URL参数传递用户信息;(2)单点登录集成。前者更简便,后者更安全。

QueryString

使用URL的QueryString方法直接传递用户信息,也是我们可能会用到的一个常用功能。

方法如下:

(1)设计报表时定义一个隐藏的参数。例如:参数名为 oauser。设置参数隐藏的目的是防止用户查看报表内容是手动输入另一个用户的用户名。

(2)在集成报表内容的URL中添加用户身份参数。

实例:

&dp="oauser":["ZhangSan"]。

跟其他参数一样,这个参数内容需要经过URL编码,结果如下:

%dp=%7b%22oauser%22%3a%5b%22ZhangSan%22%5d%7d

注意:

(1)此处的参数名(oauser)必须与报表设计时定义的参数名完全一致,大小写敏感。

(2)这种方法仍然使用固定令牌进行集成,即在集成用的URL中,QueryString的token参数值仍然是固定的字符串。

单点登录集成

如果业务系统有更高的安全性要求,可在业务系统登录画面中,通过登录API,以实现单点登录集成,并将获取的令牌放在会话变量中。

需要集成报表功能时,再从会话变量中取出令牌,串接在集成URL中。这样,业务系统的每个用户都是不同的令牌。

从业务系统的登录画面中取出的用户登录信息,是用户输入的业务系统用户名和密码。通常用业务系统用户账号调用BI系统的登录API,是需要Wyn中具有相同用户名和密码的账号才可以。

为了避免为每个用户创建多套账号密码,我们还可以编写自定义安全提供程序。

通过编写自定义的安全提供程序,可实现业务系统的用户查看报表内容时,直接以业务系统的账号登录,查看其权限范围内的数据内容。

写在最后:

无论是.Net Core还是.NET 5或6 的项目整体都有强大的服务端资源来支持,适合开发大并发,高性能的业务系统,如果实现BI 可视化大屏功能,现有的市面上的工具也已经很完善了,我们在考虑为项目中增加这一【门面】的功能时,不妨可以考虑引用现成的工具,将开发资源集中在核心业务上面,从而实现高效的跨平台项目的交付。

项目管理常用图表有哪些?这3种图表你要知道!

...总是在变化,随着项目管理理念的普及和成熟,项目管理可视化图表越来越受到重视。如果能够精确地看出项目进展全景图,可以使我们具备更多的洞察力,帮助项目保持正确的运转方向。因此,在整个项目过程中,有必要通过... 查看详情

bi数据可视化工具软件系统开发

...有用的信息,无法从海量的信息中提取、分析。而BI数据可视化分析系统就是为了解决这个痛点而诞生的。BI数据可视化工具软件系统可以有效解决海量数据整理分析,并用可视化直观的方式展现。让管理人员清晰明了的知道这... 查看详情

当pandas撞上了sql,于是一个强大的pandasql库产生了!

1.演示数据本文的所有演示数据,均是基于下方的四张表。下面这四张表大家应该不陌生,这就是​​网传50道经典MySQL面试题​​中使用到的几张原表。关于下方各表之间的关联关系,我就不给大家说明了,仔细观察字段名,应... 查看详情

bi的介绍

...再利用合适的查询工具和分析工具快速准确的提供报表等可视化分析(查询与报表可视化分析),为企业提供决策支持。目前国内外主流的商业智能BI有tableau,powerbi,派可数据等。数据可视化-派可数据商业智能BI在现阶段商业... 查看详情

3款大数据bi工具,让企业数据分析更简单

?企业数据可视化的髙速发展趋势让互联网时代的数据分析及可视化拥有全新的面貌。企业针对信息内容的数据分析及可视化,的要求在日益严格,那么有哪些在企业数据分析方面做得好的大数据bi工具呢? 一、大数据bi工具... 查看详情

bi数据可视化应用:图表联动、钻取分析

参考技术A为什么当下企业越来越追求动态数据可视化?毫无疑问,图形化的动态数据分析报表更容易让企业管理者获取数据信息以及更便于理解。而数林技术工程师们为客户演示某些数据分析报表时,有客户提到:为什么这个... 查看详情

套用bi模板,轻松搞定各类数据分析报表

...报表设计,套用后立即生效,轻轻松松搞定bi数据可视化分析报表。bi模板都有哪些类型?怎么套用?以奥威bi数据可视化软件为例,聊聊bi模板的种类和下载使用。bi模板有哪些?主要有四种类型,分别... 查看详情

你知道bi是什么吗?关于bi系统的概述

...取数流程,减少人力、时间成本;上能提供数据可视化报表,通过数据可视化分析全面展现企业发展状况,追踪业务执行效果,促进业务健康发展,辅助进行管理决策等。今天我就来从多角度了解BI 。驱... 查看详情

学会这一招,小白也能使用数据可视化bi软件创建医院数据实时展示大屏

灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏。大家可以在他们的官网下载软件。 本文以医院数据实时展示大屏为例为大家... 查看详情

如何在windows平台下编译比特币bi

...ws平台,就会感觉到无从下手.其实,比特币程序是跨平台的.你要编译windows版的比特币程序,基本上有两种方法,一种是在linux平台(推荐ubuntu13.10)通过交叉编译的方法来编译.另外一种,就是直接在windows平台编译.我想,你既然要在windows平... 查看详情

奥威power-bi服装行业bi数据可视化分析--动销商品分析

 奥威Power-BI 服装行业BI数据可视化分析--动销商品分析,需求概述:(1)该分析报表是一个简单的动销产品分析,展示动销SKU的实时数据,包括价格、销量、各门店库存以及本周销售趋势(2)表格内容包括款式、款名、型... 查看详情

永洪bi经验总结(代码片段)

...用,快速整合海量数据,提供易用、高效的数据可视化分析;3、Desktop:这是一款桌面智能数据分析工具,提供一站式、敏捷、高效的数据治理及可视化分析能力。下面主要介绍Desktop这类产品。永洪Bi报表开发... 查看详情

bi报表怎么做

...分析现有情况、预测趋势等的作用。要使用BI报表,首先你要有一个数据仓库来总合从各种信息源采集来的信息,并将这些数据分类、标准化,这是一个ETL的过程。根据以上数据集市,按照客户的需求,使用BI的报表工具生成BI报... 查看详情

2021年9大企业可视化bi软件

...更直观的展现,数据分析软件可帮助公司通过报告、数据可视化、应用程序等从数据中获取见解。没有数据分析平台,数据分析师或数据科学家将无法有效执行项目。数据分析工具,加上适当的基础架构和技能,数据科学家可以... 查看详情

bi软件有哪些?该如何去选择呢

...很多的人对于这些知识了解的并不是很多,比如说也想要知道bi软件有哪一些呢,其实最为常见的就是下面的这三种。1、BDP商业数据平台要说bi软件有哪些,这肯定也是大家最为关心的,能够有效的帮助企业快速的完成数据的整... 查看详情

在c#中的listview控件中,当鼠标悬浮在某列或者当选中某行时怎么显示图片??

...的listview的名字,ToolTipText是一个属性,后面的bi,Remark是你要显示的什么东西,我这里是现在的备注。你要选中某行得到某行的值,Rows.Index获取到后去查询显示在你设定的位置追问可以加个扣扣不,大哥,没懂也现在我有遇到问... 查看详情

asp.net权限如何设置?

...修改权限设置为允许,其他角色都无权限。我是新手,不知道这两种方法可行吗?有什么区别?其实我主要纠结在修改功能和添加功能这个权限上,不知道到底是将其放在单独页面里,然后设置该页面访问权限来达到控制目的,... 查看详情

两句话题意感觉这一题的套路很强

http://acm.uestc.edu.cn/#/problem/show/1171颠覆了我求gcd的思路,以前的都是mobius求gcd=1的,现在的这个能求所有的。设ans[i]表示gcd=i的集合数。那么需要求ans[k],我们需要知道所有k、2*k、3*k......的元素的个数总和。那么所有可能的集合数... 查看详情