当.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 属性。

例如：


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

效果如下图：

如果你想在新的浏览器窗口中打开仪表板内容，只需设置一个超链接，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 可视化大屏功能，现有的市面上的工具也已经很完善了，我们在考虑为项目中增加这一 [门面] 的功能时，不妨可以考虑引用现成的工具，将开发资源集中在核心业务上面，从而实现高效的跨平台项目的交付。