乐趣区

关于前端:当Net撞上BI可视化这3种套路你必须知道

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

事件是这样的。
这次客户应用的是.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 我的项目中的集成形式,但想要更好地解决理论我的项目中的问题,还须要一些更高级的集成性能。

集成中的权限治理

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 可视化大屏性能,现有的市面上的工具也曾经很欠缺了,咱们在思考为我的项目中减少这一【门面】的性能时,无妨能够思考援用现成的工具,将开发资源集中在外围业务下面,从而实现高效的跨平台我的项目的交付。

退出移动版