当.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即可。

例如: