最近葡萄在做技术支持,遇到了客户给我们的新问题。
事情是这样的。 这次客户用的是.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 项目中的集成模式,但要更好地解决实际项目中的问题,需要更高的水平的集成功能。
使用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 可视化大屏功能,现有的市面上的工具也已经很完善了,我们在考虑为项目中增加这一【门面】的功能时,不妨可以考虑引用现成的工具,将开发资源集中在核心业务上面,从而实现高效的跨平台项目的交付。